New

Legibility vs Readability

Legibility is how easily a reader tells characters apart; readability is how comfortably a reader follows whole lines, paragraphs and sentences.

12 min read

Reviewed by Ravi SuranaUpdated

Quick answer

~20 sec

Legibility versus readability is the design distinction between two ways text can fail a reader. Legibility is how easily a reader can tell one character from another, and it depends on letter shape, size, contrast and spacing. Readability is how comfortably a reader can follow whole lines and paragraphs, and it depends on line length, line spacing, layout and wording.

012 min

A page that is legible but not readable

Picture a designer who publishes a cancellation-policy page for a subscription app. The text is black on white, in a plain sans-serif at 18 pixels. A contrast checker passes it, and every letter is easy to tell apart.

In a usability session, the page still fails. People read the first paragraph and then slow down. They lose their place at the end of each line. They go back and read the same line twice. Some stop and write to support instead.

The designer's first guess is that the font is wrong. It is not. Each line on the page holds about 140 characters, the lines sit close together, and each paragraph runs past 300 words. (These numbers are made up for the example.) Every letter can be seen, but the reader cannot move through the text without effort.

Now take the opposite case. Take a short warning on a product label, set in pale grey type that is only a few millimetres tall. The line is short and the layout is tidy. The reader still cannot make out the letters. Here the arrangement is fine and the letters are the problem.

Design has two words for these two failures. The first page has a readability problem. The label has a legibility problem. The rest of this article shows what causes each one, how people measure them, and why fixing the wrong one wastes the work.

140 characterslose their place
Look at the arrow: on a very wide line, the eye has a long way to go from the end of one line back to the start of the next.

021 min

Where legibility and readability come from

Neither word has one inventor. In everyday speech people use the two words as synonyms. Graphic design separates them. That separation is a convention among designers and typographers, not a finding with an author and a date.

Other fields draw the line in other places. In a 2011 review of print size, the vision scientists Gordon Legge and Charles Bigelow used legibility for the question of whether text can be read. A typographer would split that question between the two words.

Readability also has a second meaning that comes from writing, not from type. Rudolf Flesch built a formula that scores how hard a passage of English is from the length of its sentences and its words. Software that grades text by school year uses descendants of that formula. In that sense a page can have a good readability score and still be set in a typeface nobody can read.

When someone says a design is "not readable", ask which meaning they intend. This article uses the typographic one, where readability is about reading comfort on the page. The writing-difficulty meaning gets its own section later.

032 min

What legibility and readability depend on

The two problems have different causes, so they need different fixes. The table sorts the usual causes by the problem they produce.

AspectLegibilityReadability
What the reader doesRecognises each characterMoves along lines and from paragraph to paragraph
Main causesLetter shapes, size, contrast, space between lettersLine length, space between lines, alignment, paragraph length, headings
A typical failureA capital I, a lowercase l and a numeral 1 look the sameLines so long that the eye loses the next one
Where it matters mostSigns, labels, buttons, small text, headlinesArticles, help pages, documentation, reports

Legibility comes first because readability depends on it. The WebAIM accessibility group points out that readers do not look at letters one by one. The eye takes in groups of about six to nine characters at a time. A character that is hard to tell apart interrupts that group, and the reader has to stop and look at it. A readability problem works over a longer distance. It does not stop the reader on one letter. It slows the reader a little on every line, until the reader gives up.

Size has a range of good values

A common belief is that text should be as large as possible. The vision research says otherwise. In a 2011 review, Gordon Legge and Charles Bigelow found that text is read at its top speed across a range of sizes, not at one size. The range spans a factor of 10, from about 0.2 degrees to 2 degrees of visual angle. At a reading distance of 40 centimetres, that is from about 4 points to about 40 points.

Most books and newspapers fall inside that range. Outside that range, reading slows down, whether the text is too small or too large. Small text is a legibility failure, because the letters are hard to make out. The fix is to choose a size inside the range, then check the other causes.

042 min

How contrast is measured for legibility

Contrast is the part of legibility that has an exact rule. The W3C Web Content Accessibility Guidelines (WCAG) measure it as a ratio. Take the relative brightness of the lighter colour and the darker colour, add 0.05 to each, and divide the lighter by the darker. The ratio runs from 1:1, which means no difference at all, to 21:1, which is black on white.

WCAG 2.2 Success Criterion 1.4.3, Contrast (Minimum), requires a ratio of at least 4.5:1 for normal text. This is a Level AA requirement. Its stated aim is that people with moderately low vision, or with reduced contrast perception, can read the text without special tools.

Colour does not set the ratio

A common mistake is to think a pleasant colour pairing is enough. The ratio ignores the colour itself and uses only brightness. The W3C gives the reason: for people who cannot tell some colours apart, the hue and the saturation change how well they read very little, while the difference between light and dark changes it a lot. Two colours that look very different can still fail if they are equally bright.

Larger text needs a lower ratio

The same criterion lets large text pass at 3:1. WCAG counts text as large when it is at least 18 points, or at least 14 points and bold. A designer who shrinks a heading below that size must raise its contrast to 4.5:1 at the same time.

052 min

Legibility on labels and road signs

Legibility is the easier of the two to test, because a reader can be moved farther from the text until it fails.

Say a warehouse worker reads a part code off a shelf label. The code contains a capital I, a lowercase l and the numeral 1. The label's typeface draws all three almost alike. The worker types the wrong one, and the order goes to the wrong shelf. Nothing about the label's layout is at fault. The label is hard to read only because three characters cannot be told apart. A designer for this label would choose a typeface that draws the three differently, or would use a code that avoids all three.

Clearview: a legibility fix that was hard to prove

Road signs are where poor legibility costs the most, and one typeface shows how hard it is to prove an improvement. Clearview is a typeface made for highway guide signs, and the US Federal Highway Administration (FHWA) put it through years of testing. Its designers wanted letters that older drivers could read from farther away, on signs made of very bright reflective sheeting.

The FHWA gave Clearview interim approval for light-on-dark guide signs on 2 September 2004. A notice dated 25 January 2016 ended that approval. The agency's technical brief explains why. The main study behind the approval found that changing only the reflective sheeting of the sign improved legibility by 6 percent. The gain credited to the new letters was modest, and the study said part of it could come from the letters being larger. The most recent study the brief reviews found no practical advantage over the standard letters.

The lesson for designers is that a legibility claim needs a fair comparison. The new typeface and the brighter sign material had been changed together, so the gain could not be assigned to either.

Recognition can pass for legibility

Measuring legibility has a second trap. One of the sign studies noted that some very long reading distances came from people recognising words they had already seen in the test, not from seeing the letters. A reader who already knows the word needs fewer clear letters to name it. For this reason, a legibility test should use words and codes the reader has never seen, such as part codes or street names that are new to them.

part codeIl1l or 1?
Look at the three characters in the window: drawn this way, a reader cannot tell which one the code contains.

062 min

Readability as reading difficulty

A page can also fail with perfect type and a well-set column, because the words and sentences are hard. This is the second meaning of readability, and the measuring tools for it are different.

How the Flesch formula works

The Flesch Reading-Ease formula uses two averages: the number of words in a sentence and the number of syllables in a word. Longer sentences and longer words lower the score. The formula is 206.835 minus 1.015 times the average sentence length, minus 84.6 times the average syllables per word. Higher scores mean easier text. Kincaid and his team later adapted it into a grade-level version for the US Navy, which returns a school year instead of a score.

Printed examples help set a scale. Wikipedia's summary of the formula reports that Reader's Digest scores about 65 and Time magazine about 52. Neither number says anything about the type those magazines are set in.

What the formula cannot see

The formulas were developed for school books, and they count words and syllables only. Wikipedia's summary says they do worse than testing a text directly with typical readers, because they leave out differences between readers and the effects of content, layout and retrieval aids. Two pages with the same text and the same score can read very differently if one has 140-character lines and the other has 65.

This is why a readability checker covers only one of the two problems in the cancellation-page case. It could tell the designer that the sentences were short. It could not tell the designer that the lines were too wide.

A score used as a rule

Some institutions use the formula as a legal limit. Pennsylvania was the first US state to require that car insurance policies be written at no higher than a ninth-grade level, as measured by the Flesch–Kincaid formula. The rule is easy to check, and it shows what the formula is good for: a plain, repeatable test of wording. It does not check whether the printed policy is legible.

072 min

Mistakes about legibility and readability

Several beliefs about these two qualities are common and wrong. Each one sends a team to fix the wrong thing.

Serif or sans-serif settles it

Many people say serif type reads better in print and sans-serif reads better on screens. The evidence is weaker than the saying. Wikipedia's summary of the research reports that serifs have little observable influence on reading speed. WebAIM says there is no single best typeface and that experts disagree. What matters more is whether the typeface is simple, familiar and free of look-alike characters.

A special dyslexia font fixes legibility

Typefaces such as OpenDyslexic are sold as a way to make text easier for readers with dyslexia. In 2017, Jessica Wery and Jennifer Diliberto tested OpenDyslexic against Arial and Times New Roman with elementary students who had dyslexia. The students read lists of letters, real words and nonsense words. Neither reading speed nor accuracy got better for any single student, or for the group as a whole. None of the students said they preferred the font. This is a small study, but it shows that a font marketed for one group needs to be tested with that group before a team relies on it.

The layout only has to work in the designer's settings

Readers change the page. WCAG 2.2 Success Criterion 1.4.12, Text Spacing, asks that a page keep all its content and function when a reader sets the space between lines to 1.5 times the text size, the space after paragraphs to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times. Readers can apply these values with a browser extension or a bookmarklet. A layout with fixed-height boxes can cut text off when they do, so a page can pass in the designer's tools and fail in the reader's browser.

082 min

Fixing a page that is legible but hard to read

Back to the cancellation page. The designer now knows the letters are not the problem, so the work is in the layout. These are the moves, in the order that avoids wasted effort.

  1. Check legibility first.

    Confirm the contrast ratio, the size, the letter spacing and kerning, and the look-alike characters. A legibility failure makes every later change pointless, because the reader still cannot recognise the text.

  2. Narrow the column.

    Suppose the designer cuts the lines from 140 characters to about 65. (This number is also made up for the example.) WCAG 2.2 Success Criterion 1.4.8, Visual Presentation, which is Level AAA, asks for lines of no more than 80 characters, or 40 for Chinese, Japanese and Korean text.

  3. Open the space between lines.

    The leading should be loose enough that the eye can find the next line. Do not test this only on one paragraph; test it on the longest.

  4. Break the text.

    Cut paragraphs to a few sentences and add headings that name what each part decides. A visual hierarchy lets a reader see where to go next, and whitespace between parts shows where one part ends.

  5. Watch real readers.

    The test of readability is whether people reach the end without going back. Count how often they re-read a line or stop.

A short rule decides where to put the effort. If people read the text in a glance, as with a sign, a button or a label, work on legibility. If they read for a minute or more, as with a help page or an article, work on readability. In both cases do legibility first. If a layout change shrinks the text, check legibility again before moving on.

091 min

Legibility vs. readability vs. understandability

Legibility and readability have a third neighbour, and it is the one most often mistaken for them. Understandability asks whether the reader can find what they need, understand it and act on it. The Center for the Advancement of Teaching at Temple University describes all three in that order: legibility is telling letters and numbers apart, readability is how easily the brain turns letters into words with meaning, and understandability is whether the information is clear, findable and right for the audience.

AspectLegibilityReadabilityUnderstandability
QuestionCan I tell the characters apart?Can I follow the text?Can I find it and use it?
Fixed byType, size, contrastLine length, spacing, wordingStructure, navigation, clear instructions
TestMove the reader away or shrink the textWatch for re-reading and stoppingAsk the reader to complete a task

Accessibility covers all three, which is one reason the words blur. A page that meets WCAG contrast rules is legible. It is not automatically readable, and it may not be understandable.

?4 questions

Questions people ask

What line length should body text use?

Guides give slightly different ranges, from about 45 to 75 characters per line. Choose a value inside that range, then test it with your typeface and size, because the best width changes with both.

Does WCAG set a minimum font size?

No. WCAG sets contrast ratios, text resizing and text spacing rules, but it names no typeface and no minimum size. Pick a size inside the fluent reading range, then check it with real readers.

Do the Flesch formulas work in other languages?

They were built to score written English, so their scores do not carry over to other languages. A text in another language needs a formula made for that language, and none replaces testing with readers.

Do line length rules change for other writing systems?

Yes. WCAG 1.4.8 allows 80 characters per line for most scripts but only 40 for Chinese, Japanese and Korean. Check line length, size and spacing again in each script a product ships.

§11 sources

Sources

  1. Wikipedia. "Legibility".

  2. Legge, G. E. and Bigelow, C. A. (2011). "Does print size matter for reading? A review of findings from vision science and typography". Journal of Vision 11(5):8.

  3. WebAIM. "Typefaces and Fonts".

  4. W3C. Understanding Success Criterion 1.4.3: Contrast (Minimum), WCAG 2.2.

Show all 11 sources
  1. W3C. Understanding Success Criterion 1.4.8: Visual Presentation, WCAG 2.2.

  2. W3C. Understanding Success Criterion 1.4.12: Text Spacing, WCAG 2.2.

  3. US Federal Highway Administration. "Interim Approval for Use of Clearview Font for Positive Contrast Legends on Guide Signs (IA-5), Termination", memorandum of 28 January 2016.

  4. US Federal Highway Administration. "Interim Approval 5, Termination: Technical Brief".

  5. Wery, J. J. and Diliberto, J. A. (2017). "The effect of a specialized dyslexia font, OpenDyslexic, on reading rate and accuracy". Annals of Dyslexia.

  6. Wikipedia. "Flesch–Kincaid readability tests".

  7. Center for the Advancement of Teaching, Temple University. "Legible/Readable/Understandable".

Keep reading

More from Design

All of Design
All of Design

Missing a concept?

Tell us what to write next. We’ll email you when it’s live.

Several? Separate them with commas.

Only to tell you when it’s live.

How we use your email: privacy.