Typography: Readability and Legibility (Part 1)

Readability and legibility are two elements that every designer needs to think about when making their type choices. Readability is how easy it is to read words, phrases, blocks of copy such as a book, a web page or an article. Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface. In this post we’ll focus on readability and next week, in part 2 we’ll look at legibility. As more fonts become available for use on the web, it’s important that you choose one that doesn’t wear your readers out.

There are several factors that determine if text is readable and one of the most important is what typographers refer to as transparency or invisibility. The idea being that if a typeface is noticeable, it can be difficult to read. If you find yourself stopping to admire a font instead of reading the text, that is not a particularly readable font. This can happen if a typeface calls attention to itself because it has extreme features such as swashes, distortion, very thick and thin strokes, is very tall or very short. Take a look at the example below with the paragraph on the left set in Verdana – very readable on the web. The paragraph on the right is set in a more decorative font that really tires your eyes quickly.

Typefaces for Body Copy

For body copy there are two choices – old-style serif and sans-serif. Most other categories of typeface are too distracting. On paper, serif faces are generally the most readable which is why most newspapers and books are set using serif fonts for the body copy. The serifs help lead the eye from one character to the next. However on screen, sans-serif fonts (such as Arial, Verdana) are considered to be more readable. Sans-serif fonts have larger x-heights and little variation in stroke width. That does not mean that you should never use serif fonts on the web, you certainly can but it’s always a good idea to test out how easy it is to read text.

There are other factors which affect the readability of a block of text.

Lowercase and All Caps

Text set in lowercase is easier to read. When we’re reading we’re read in phrases, not letter by letter and the shape of a word is a factor in our recognition and speed of reading. When text is set in all caps every word looks like a rectangle. If you’ve ever received an email set in all caps, I’m sure you’ve found that as well as being difficult to read, it gives the impression that the sender is shouting. All caps are fine for short bursts of text such as headlines or for emphasizing single words, but avoid it for readability of body text.

Letter Spacing and Word Spacing

Letter spacing is the amount of space between letters (read more about tracking and kerning here) and word spacing, as the name implies the amount of space between words. Both are major factors in how readable body copy is.

Line Length and Justification

Whether it’s on the web or on a printed page, if a line is too long, it can be difficult to find the beginning of the next line. If a line is too short, it breaks up the phrases we recognize. A very simple rule of thumb is to use shorter lines with extra space between the words when using sans serif typefaces.

Reverse Type and Light or Heavy Weights

Black type on white or light background appears to be larger than white type on a dark background (reverse). To compensate, use a larger or bolder size and avoid typefaces with a dramatic variation in stroke thickness. Thin strokes tend to disappear when reversed out.

And there you have a few points to keep in mind when choosing your typefaces in order to keep your text legible. Any other tips that you’d add to the list? In next week’s typography post we’ll look at legibility.