Typography: Readability and Legibility (Part 1)

image 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.

readability

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.

image

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.

image image

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.historycommons.org/ Black Max

    Nice primer. Looking forward to the post on legibility.

  • http://www.laughingliondesign.net Jennifer Farley

    Thanks Black Max.

  • http://www.magain.com/ Matthew Magain

    Great stuff Jennifer.

    One thing that I remember from design school was “never use all caps with a script font,” whether for body copy or for heading text. It kind of seems obvious, but it still happens, and both readability and legibility suffer!

    Perhaps I’ll take a pic next time I go past and share. :-)

  • http://www.laughingliondesign.net Jennifer Farley

    Thanks Matt. Yes, all caps in a script font is a cardinal sin! Definitely something to avoid.

  • nrlz

    How about the use of “justified” text.

  • Stevie D

    How about the use of “justified” text.

    There is no justification for the justification of text.

    Most web browsers have a very rudimentary approach to justifying text, with no hyphenation, which leads to ugly wide spacing that looks wrong and makes text difficult to read. This is exacerbated on the web where people typically type shorter paragraphs, which makes the one benefit of justified text – a neat right margin – even more elusive.

  • G F Mueden

    It has been established that the legibility of srif and sans-serif fonts differ, but I wonder if the difference is enough to worry about. What could it be, 2%, 5%, 8%?
    Does anybody know? I suspect that it is so small that the decision should be based on style. [Like my having two spaces between sentences and this software making it one.]
    BTW, I like this text entry (wimpy and hard to read) being repeated above in my choice of fat high contrast font. Thank you !!!
    ===gm===

  • http://www.crearedesign.co.uk/ Nicola Connolly

    The optimum number of words per line is also something to think about. Studies have suggested (for print) that the ideal is approximately 12 words.

    Non-intrusive ‘invisible’ text is an art… it allows the content to do the talking.

  • http://www.facebook.com/profile.php?id=100002732890347 Ging Tanakijkamchai

    Like like

  • http://www.facebook.com/profile.php?id=100002732890347 Ging Tanakijkamchai

    goooooooooooooooood