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?

    <!-- Your content in here -->


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.


  1. Sans serif fonts are easier to read on more screens;1
  2. Allow some bleed on small screens, e.g. with scroll bar on mobile devices;
  3. Set the maximum width within the “readable” range (50-75 characters);2
  4. 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.)

Check out an example page

  1. With higher pixel density, serif fonts are making a comeback, but sans-serif remains more readable at more sizes. ↩︎

  2. One of my few critiques of this particular design for the site is the text width for posts. ↩︎