By Jennifer Farley

Typography: Readability & Legibility (Part 2)

By Jennifer Farley
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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?


Login or Create Account to Comment
Login Create Account
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?