About Readability on the Web

An Interactive Guide (to hit The Floor Running)

Disclaimer: I’m not a (Micro-)Typographer. I have done my share of print, editorial, and web development, so I have some sense of what works and what doesn’t. I have studied a bit of Gestalt theory and know about the law of proximity and other principles, but in no circumstance would I call myself a master of the trade. I remember just enough to make my pages look okay(—ish). This document is based on several resources from around the web but is mainly inspired by a talk “Good Typography, Better Apps” by Frank Rausch @ UIKonf and the “Web Design in 4 Minutes” site by Jeremy Thomas.

What you see here, if the checkboxes are not checked, is not unformatted text. It is badly formatted text. The narrower your screen is, the better it gets, but better is not good. To make this more readable, we need to consider the following rules.

1. Choose a line length that allows the eye to find the next line.
2. Create space around the text to keep it in focus.
3. Choose a typeface that is easy to read.
4. Choose a comfortable text size and tracking.
5. Choose a line height that sets a good vertical rhythm.
6. Other small tweaks, mainly color and distinction.

Line Length

The line length in the default formatting is not constrained. Therefore, we get as many words as possible per line. In the English language, the recommended character per line length is between 45 and 75. This is a rule of thumb. It depends on the typeface, the font size, the leading, and the distance to the screen/book/poster. The length I will use here might also be better suited to a desktop than a handheld device. Even the language the document is in might make a difference. In my native language German, with its long words, the text might need some more space. So experiment with this value a little to get the right amount for your publication. Use the “Line Length” checkbox to see the difference between the default line length and the line length I applied to this page. This will also show the used code below this paragraph. I used the max-width property to set the width of the text container. This way, the line length is not fixed but constrained to a maximum width of its containing element, the <p> tag. I used the ch unit here. This unit is based on the font size. It is the width of the zero character of the element's font. If you are reading this on a small screen, you might not see a difference. Try to make the window wider to see the effect, for example by tilting ↷ your device into landscape mode.

p {
  max-width: 65ch;
}
pre {
  white-space: pre-wrap;
}

Outside Space

The setting for the line length already helps to create some space in our document, but it is not distributed equally. Isn’t it awful how the text sticks to the left border of your screen? I feel the urge to balance this out, and I hope you do too. The space around the text should be equal on both sides. To do so, I use the margin property. For a document like this one, it is enough to set an equal margin for the body on the left and right sides. For more complex layouts, I suggest reaching for marvelous tools like Flexbox ¹ or the Grid. Here we set the margin on the body to the value 0 auto, which means that on the top and bottom the margin is 0, and on the left and right sides the margin is automatically calculated to be equal. Use the “Outside Space” checkbox to see the difference between the default margin and the margin I applied to this page.

body {
  margin: 0 auto;
}

Inside Space

If you are reading this on a narrow screen you will see the text sticking to both edges of the screen. You might think: “Yuk. Your line length and margin did not fix the readability problem. It made it worse!” Stick with me. We want to make this work on all kinds of screens. On a wide screen it already got better. So this one is for specially for you. To create some more space around the text we can use the padding property. This property creates space inside the element. I used the padding property to create space around the text. I set the padding on the body to a value of 1rem. This way the text is not directly on the edge of the screen. I also give the <pre> tag some padding on the left and right side to make it differ from the rest of text. Use the “Inside Space” checkbox to see the difference between the default padding and the padding I applied to this page.

body {
  padding: 0.5rem;
}
pre {
  padding: 0 1rem;
}

For this rule, we have plenty of possibilities at hand. Google Fonts, for example, provides many typefaces, way too many in my humble opinion. I also prefer not to rely on external resources for the first draft. To get started without having to think too much about it, I tend to go to Modern Font Stacks. These are typefaces that exist on modern computers. This means we don’t need to download a font, place it in the right directory, ship it with our markup, or load it from a content delivery network (CDN). We can just start writing code. Use the “Typeface” checkbox to see the difference between the default font and the font I chose for this page.

body {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-weight: normal;
}
code {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, DejaVu Sans Mono', monospace;
  font-weight: normal;
}
  

Text Size

Here we have to alter the text size and tracking. The text size should be big enough to read but not too big to make the reader feel like a child. The tracking should be tight enough to make the text look cohesive but not too tight to make it hard to read. Use the “Text Size” checkbox to see the difference between the default text size and the text size I applied to this page. To get a consistent font size, I tend to use the rem unit. This way, I can change the font size for the whole page by changing the font-size property of the html element. The tracking is altered by setting the letter-spacing to 0.01rem for the body text. To learn more about the rem unit, read Chris Coyier’s article on CSS-Tricks. To adjust the size of the code elements, I also applied a different font size to the <code> tag. This makes the height of the monospace characters match the size of the body text. This needs to be matched visually, as it depends on the typefaces.

html {
  font-size: 18px;
  letter-spacing: 0.01rem;
}
code {
  font-size: 0.89rem;
}
  

Vertical Rhythm

What does vertical rhythm mean? In the default formatting, the lines are too close together. This makes it hard to find the next line. The line height should be set to a value that makes it easy for the eye to find the beginning of the next line. A rule of thumb is 1.5 times the font size. As you can see, I use a value without a unit. Unitless values use this number multiplied by the element's font size. Use the “Vertical Rhythm” checkbox to see the difference between the default line height and the line height I applied to this page.

body {
  line-height: 1.5;
}

Small Tweaks

The above changes already make a big difference in the readability of the text. But there are some small tweaks that can make your text even more readable. I set the color property to a value of #403f53. This is a dark grey color. This way the text is not black but still easy to read. I set the background-color property to a value of #fbfbfb. This is a light grey color. This way the text is not directly on the white background. I also used a gradient as a background color for the code elements and a dashed border on the left to make them stand out a little more. Lastly, I changed the appearance of the <hr> tag to be dashed as well. To make my colors reusable, I set them as custom properties on the :root element. Use the “Small Tweaks” checkbox to see the difference between the default text and the text I applied to this page.

:root {
  --body-bg: #fbfbfb;
  --text-color: #403f53;
  --link-color: #0077cc;
  --link-hover-color: #004466;
  --link-visited-color: #440099;
  --link-visited-hover-color: #220066;
  --border-color: #282828;
  --code-bg: #f6f6f6;
  --code-color: #403f53;
  --code-border-color: #282828;
}
body {
  color: var(--text-color);
  background-color: var(--body-bg);
}
pre {
  color: var(--code-color);
  background: linear-gradient(to left, var(--code-bg), var(--body-bg));
  border-left: 1px dashed var(--code-border-color);
}
hr {
  border: 0;
  border-top: 1px dashed var(--border-color);
  margin: 1rem 0;
}

Conclusion

These small changes make a big difference in readability. The content is easier to grasp. Of course, all these changes only work well together and depend on each other. Just a last note: if you take a look at the source code, you will not see the same structure as described in this document. To allow you to toggle the different settings, I used JavaScript to apply classes to the elements. Above, I show how to apply the CSS directly to the HTML tags.

TL;DR

Check all the boxes (Hint: visit the site with the url search param ?checked=true), grab the full and condensed CSS and start building your own project!

:root {
  --body-bg: #fbfbfb;
  --text-color: #403f53;
  --link-color: #0077cc;
  --link-hover-color: #004466;
  --link-visited-color: #440099;
  --link-visited-hover-color: #220066;
  --border-color: #282828;
  --code-bg: #f6f6f6;
  --code-color: #403f53;
  --code-border-color: #282828;
}

html {
  font-size: 18px;
  letter-spacing: 0.01rem;
}
body {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-weight: normal;
  line-height: 1.5;
  margin: 0 auto;
  color: var(--text-color);
  background-color: var(--body-bg);
  padding: 0.5rem;
}
code {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
    'DejaVu Sans Mono', monospace;
  font-weight: normal;
  font-size: 0.89rem;
}
p {
  max-width: 65ch;
}
pre {
  padding: 0 1rem;
  white-space: pre-wrap;
  color: var(--code-color);
  background: linear-gradient(to left, var(--code-bg), var(--body-bg));
  border-left: 1px dashed var(--code-border-color);
}
hr {
  border: 0;
  border-top: 1px dashed var(--border-color);
  margin: 1rem 0;
}
a {
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
}
a:visited {
  color: var(--link-visited-color);
}
a:visited:hover {
  color: var(--link-visited-hover-color);
}

Built with ❤︎ by ff6347