Typography: Readability & Legibility (Part 2)

Typography

Last week we looked at the major factors which can affect the readability of text. This week we’re looking at legibility. As a quick refresher on the difference between the two:

  • Readability is whether an extended amount of text—such as an article, book, web page—is easy to read.
  • Legibility is whether a small burst of text such as a sign or a headline is instantly recognizable.

Unless text is perfectly legible, it takes longer to read it. The situations where it’s most important for text to be legible is where information is scanned quickly or skimmed through by the reader. And we all know most people skim through web pages, glance at signs and headlines and scan catalogs. So if you’re designing anything like that you need to make sure the text is legible otherwise information will be missed or simply ignored. If you’re running from a burning building or trying to find your way using road signs, it’s vital that they should be instantly recognizable. The sign below on the left is not ideal.imageWord RecognitionA major factor which influences legibility is the word or words themselves. Some words lend themselves to almost any typeface and people will understand it, while more unusual or less frequently used words need to be clear and legible.imageAvoid very small or very large x-heightsVery large x-heights in typefaces decrease legibility. The x-height is defined as the distance between the baseline and the mean line in a typeface. This is generally considered to be the height of the letter x in any font (it also includes the letters u, v, w, and z.)imageImage Credit: WikipediaFor example in some typefaces if the x-height is too large, then the letter i can barely be differentiated from the letter l.  A very small x-height also decreases legibility. Our eyes find it distracting when the body of the letter is too small compared to the ascenders and the cap height.imageLowercase lettersAs mentioned in the post on readability, TEXT SET IN ALL CAPS IS THE LEAST LEGIBLE BECAUSE OUR EYES RECOGNISE WORDS BY THEIR SHAPE AS WELL AS THE LETTERS THEY INCLUDE. ALL CAPS MEAN EACH WORD IS THE SAME SHAPE. You might have found that you read the last two sentences ever so slightly slower than the rest of this post. All caps are suitable for very short sentences or headlines.Another Problem Occurs When You Use Title Case In Sentences. Title Case Is A Mixture Of Upper And Lower Case And Is Suitable For Titles Only Because It Is Too Hard To Read.Avoid extra heavy or condensed fontsIn the paragraphs below, the paragraph on the left is easy to read set in Myriad Pro Regular. The paragraph on the right is also Myriad Pro but the style is Condensed Bold and it’s much harder work to get through the full paragraph.imageTo sum up, text needs to be most legible where it will be scanned or skimmed over very quickly. Some guidelines to make type most legible:

  • Use typefaces with average x-heights
  • Use lowercase letters with capitals where appropriate
  • Avoid condensed or slanted type
  • Add extra letter space in very small point sizes and less letter spacing in larger sizes

These are of course just guidelines. Even if you break these rules and go for unusual typefaces, the type is still readable but it just might take longer to read. It really depends on the project you’re working on, but if you’re aware of some of the issues it can help you choose your typefaces.What else would you add to the list?

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.

  • brendanlives

    Wow i found this very helpfull. Those were things i would not have normally thougt of. I like that. I am just beging and little things that make a big difference like that are rather facinating. Very odd i significanlty slowed down durring the caps.

  • seo@spicewebs.in

    I am fascinated towards to typography…just send some tips and tricks…

  • G F Mueden

    Whatever you do, you won’t please everyone. It is a kindness to the visitor with poor eyes to enable the use of the font he has chosen in his software.

    BTW having a ‘repeater’ show what I have typed is a great help. It uses my choice of font. It is almst as good as having my font used in the text entry box.

    ===gm===