Daily Tips & Tricks for Web Enthusiasts

Text Readability Basics

There are five primary factors involved when it comes to designing text that's comfortable to read on the web:

  • Font Family
  • Font Size
  • Font Color
  • Line Length
  • Line Height

Font Family

Generally speaking, for body copy, you should use a serif or sans-serif font designed for large blocks of text. The usual suspects here are font families like Helvetica/Arial, Times, and Georgia. Avoid fancy script font families, typefaces designed for headlines, and the like.

Font Size

When it comes to the size of text on the web, the biggest misstep to avoid is making text too small. Most web browsers default to a font size of 16px for a reason; don't go much smaller than that.

Font Color

Font color is important for one reason: contrast. In order for your text to be readable it needs to have a decent contrast ratio. Be wary of placing light text on a light background, or dark text on a dark background. Not everyone has perfect, or even good vision. As we age our eyes take in less and less light. Just because you can read something doesn't mean everyone can.

Line Length

The optimal length of a line of text is a matter of some debate, but most people agree that the acceptable range is somewhere between 50-75 characters long, including spaces. You should avoid going over 80 characters long at all costs, as doing so will have a severe impact on the readability of your text. As a general rule of thumb, and depending on the font family being used, you'll want to aim for a width of 25em to 35em as a good starting point, and then tweak things from there.

Line Height

Like line length, line height is another subjective area, but most people agree that something between 1.2-2 times the size of your text is best. One thing to note here is that, in CSS, the line-height property will take a value without a specific unit, which makes sure the line height is always relative to the size of the text in question. So, avoid line-height: 1.5em and use line-height: 1.5 instead.

This tip barely scratches the surface of typography on the web, but it’s a start. Get these basics right and your text will be comfortable for the majority of people to read, and the more comfortable people are reading your content the better!