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?

Jennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

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


Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.