Simple CSS for Text Pages
Photo by Pankaj Patel on Unsplash
Need to make text-heavy page more readable? Want to do it with minimal effort?
...
<body>
<div>
<!-- Your content in here -->
</div>
</body>
...
with
body > div {
font-family: sans-serif;
width: 90vw;
max-width: 70ch;
margin: auto;
}
(You could also apply these styles directly to the body element, but I prefer
to think of that as covering the view port, and define a content container
within it.)
Bigger screens and higher resolutions mean that the defaults that made sense when HTML was first being developed no longer apply so readily. Also, mobile devices weren’t really a problem at the time.
Principles:
- Sans serif fonts are easier to read on more screens;1
- Allow some bleed on small screens, e.g. with scroll bar on mobile devices;
- Set the maximum width within the “readable” range (50-75 characters);2
- Centre the text horizontally for balance.
It’s not fancy, but then, that’s entirely the point. Let the HTML and CSS defaults do the work where they can, and provide some sensible defaults for modern technology when it doesn’t. (The ideas here are inspired by CUBE CSS ; the idea that we don’t need to micro-manage CSS for every possible viewport, but just let it do what it does best, and maybe give it a little nudge.)