Simple Sane Styling

The web is full of sites that are painful to read. Making a website readable only requires a few lines of CSS.

1
2
3
4
5
6
7
8
9
10
11
12
body {
max-width: 40em;
margin: auto;
padding: 1em 3em;

font-size: 1.3em;
line-height: 1.5;
}

img, video {
max-width: 100%;
}

Have you ever seen a book with really wide pages that didn’t have its text split into columns? Long lines are hard to read, so the first thing to do is limit the width of the content. Full width content on widescreen monitors is not pleasant.

Next, centre the content. It would feel awkward twisting your head to the left on a PC. Some padding should also be added so that there will always be at least some distance between the content and the edges of the viewport.

Use a slightly larger than average font size and line height. There really is no good reason to cram as much text as possible onto a scrollable webpage. Increasing these values makes large amounts of text much more pleasant to read. The main content of a page ought to be as readable as possible; keep condensed text to navigational elements, menus, footers and other ancillary text.

Finally, in case you have embedded videos or images, these should be made to conform to the width of the body.

That’s it!

With these few lines you can go from a painful to read default stylesheet to something much more readable. Try applying these rules to awkward webpages you find in the wild to see how quickly the unreadable becomes readable. If you’re wondering why I use em a lot, why not use this webpage as your first example.