Readability and Legibility are both important for communicating with type. The two terms that may seem interchangeable, but they refer to different, albeit connected, functions of type each with its own strength in communication.
Close to a year ago I wrote a post on legibility and readability in typographic design and at the time that difference wasn’t completely clear to me.
Recently while reading Alex White’s Thinking in Type, I gained a new perspective of what distinguishes readable and legible type and wanted to share that new perspective.
Two Functions of Type
In order for your type to communicate it needs to do two things at different levels of the typographic hierarchy.
- Get a reader’s attention and interest
- Be easy to read
The first is about readability and the second is about legibility.
Legibility is mostly a function of typeface design. It’s a measure of how easy it is to recognize one letter or word from another and how easy blocks of text are to read.
Readability is a function of how typefaces are used. It’s about how inviting your type is to read and about getting the viewer to want to read it.
Readability
Readability applies to the overall reading experience. It’s macro-typography and it’s about making type aesthetically pleasing in order to make it more inviting to read.
Imagine you land on a web page of text that’s been formatted as one very long paragraph with no headings or subheadings. It’s just one long block of text. How inviting would it be to read? Are you going to attempt to find out?
Probably not. The only way to know if you want to read that block of text is to begin reading it and unless the first sentence or two is extremely compelling you’ll probably move on to another page.
You skip reading it because the type design wasn’t readable.
Had the type been separated into several paragraphs, had there been a main page heading and subheadings giving clues about the content, had there been images, or some bulleted lists, the text would have been much more inviting to read.
That’s readability. You design your type so it looks more interesting. You make certain parts of the type stand out to attract attention to them and let those parts provide a way into the full body of the text.
More noticeable and more interesting makes type more readable.
Display Type
Readability is generally the job of display type. Display type includes:
- headings
- subheadings
- decks – a line or two of text below and expanding on the main heading
- captions
- breakouts/pull quotes
One potential problem with readable type is it can lead to that type being less legible.
Consider the image above. The type would likely get your attention, but it would be difficult to read in large doses. It’s fine as display type in a short heading…
Because highly readable type can be less legible, you want to pick your moments for making type readable. A little goes a long way here.
In addition to making display type aesthetically pleasing and attention getting, you can use it to make your main body of text inviting to read by:
- Understanding the reader’s self-interest—use display type to make the value of your main body of text clear to the reader.
- Giving the type design a purpose—give display type distinct treatment that adds to or reveals the meaning of your main body of text.
- Keeping small display type short and brief—don’t make captions, decks, etc. several paragraphs long. It’s difficult to read smaller sized text and that text will be skipped unless it’s relatively brief.
Remember the goal of display type is readability and it’s acceptable to sacrifice some legibility to meet that goal.
Legibility
Legibility applies to parts of the text like letters and words and paragraphs. It’s micro-typography. It’s about type’s ability to be easily read, particularly under normal reading conditions.
Assuming you find some text readable at some point you’ll actually be reading it. The type shouldn’t get in the way at this point. In fact the less you actually notice the type the easier it will be to read the words.
We can think of illegibility as a condition where your mind is ready for more information, but it has to wait on your eyes to make out the words trying to convey that information. Illegible type is where your mind is waiting on your eyes.
Legibility is the opposite. The letters and words are so clear that your eyes have to wait on your mind to be ready for more. Reading legible type is effortless.
Illegible type presents barriers to communication. Legible type fosters communication.
Text Type
Legibility is the job of text type. To make text type more legible.
- Choose a medium weight font—Use regular or normal weight fonts. Bold and light fonts will be harder to read.
- Give text a comfortable size and column width—Ideal size and measure is somewhere between 13px–15px font size and 50–65 characters per line.
- Make type decisions invisible—Don’t try to draw attention to text type as the reader should be reading and not thinking about your type decisions.
Again by the time readers have made it to your text type they’ve made a commitment to reading. Your text type should stay out of their way so they can read.
Factors Affecting Both Readability and Legibility
There are a variety of factors that affect both the readability and legibility of type. I’ve talked about many of these before, but will attempt to do so here in terms of readability and legibility specifically.
| Type Characteristic | Thoughts |
|---|---|
| Type size | Optimal type size is between 13px and 15px. Smaller type becomes less legible. Type made larger, particularly when used sparingly can be more readable. |
| Type weight | Medium weight fonts are the easiest to read. Bold fonts attract attention in comparison |
| Type style/posture | Roman is easier to read than italic. Italic can be used to emphasize short blocks of text for greater attention |
| Line length | Roughly 50–65 characters is an ideal measure. Anything significantly smaller or larger loses legibility. When combined with some other factors a small line of text can be more readable |
| Letterspacing | Text type generally doesn’t need letterspacing as it should be designed in the typeface. Display type, especially when large often requires some negative letterspacing |
| Wordspacing | The space between words should be enough to recognize they’re different words, but not so great as to degrade their connection to each other. Playing around with wordspacing as with letterspacing can attract attention to type |
| Linespacing | The space between lines should increase as the length of the lines increases. usually a line-height between 1.2 and 1.5 works well. Decreasing linespacing so lines of text touch and blend together can make display type more interesting at times. |
| Justified vs flush left/right | Type that is set flush left with a soft right rag is the easiest to read. Display type can be justified or flush right to make it more readable |
| Lowercase, all caps, small caps | Lowercase letters have more contrast in their strokes making them easier to read. All caps should be reserved for display type. Small caps can be used for emphasis within text type. |
| Contrast between type and background | Black text on a white background is the most legible. Everything else reduces legibility. |
| Serif vs sans-serif | Serif fonts have been thought to be more legible than sans-serif fonts as the serifs lead the eye horizontally across a line of type. Either can be highly legible or readable. Common advice is to choose one for text type and the other for display type in order to provide more contrast. |
Summary
Readable type and legible type sound like they should be the same thing, but they are different and describe two different functions of type.
Readability is about attracting attention to type in order to create a desire to read. Display type is typically used to make type more readable and interesting.
Display type should be used sparingly as increasing readability often comes with a reduction in legibility.
Legible type is about making text easy to read. The goal of text type is to stay out of the way and not attract attention to itself.
Increase readability in display type and increase legibility in text type.
Download a free sample from my book, Design Fundamentals.
Great post but its quite heavier to digest, just a thought.
This was a great look into text and when its a good idea to use decorative fonts. Thanks for the great tips!
The “EASY TO READ” part s on top of the list for me. Most designer nowadays miss the point wehn it comes to makeing text legible. Nice article!
I hear you Chris. I land on so many websites where I can’t read the text at all. No matter how the site looks and functions I don’t last there long, because it’s impossible to read anything.
Thinking larger or bold might be acceptable for documents read on smart phones since most screens are small and difficult to read at a glance…. Yes?
The size of the text probably depends more on how close someone holds the phone. Oliver Reichenstein wrote a really good post about responsive typography in he talks about text size and how it depends on reading distance. If the device is closer to you then text should be smaller in comparison to a device further away.
Of course my older eyes are wanting all text bigger with each passing day. 🙂
I found this article very legible, haha. It’s a great comprehensive account of everything one needs to know and remember while practicing typography.
Thanks Aakriti. I’m glad you enjoyed the article.
As a former typographer, I have some strong feelings about legibility and readability. I don’t like the trend, fostered by Microsoft Outlook, toward sans-serif as a text typeface. I changed my Outlook default to 12 pt. Georgia, a beautifully readable text typeface. I notice you combined sans serif bold headings with serif text, which was great. In my opinion, sans serif should only be used for heads, subheads, and captions.
In this article, when you went to blue italics, legibility dropped because it was too light a blue. You could choose a darker blue or make it bold.
Have you noticed that every major newspaper uses serif text typefaces and most use sans serif headlines? There’s a reason for that!
I publish a real estate column in the Denver Post as paid advertising (“advertorial”) and the paper requires my text to be sans serif so it’s not mistaken for unpaid editorial content. Otherwise I’d follow my own advice!
Another trend I really dislike is using gray type instead of black type on websites. Who’s the genius who started THAT trend?
love the informations although it felt a bit longer than usual