What is the difference between readability and legibility?

Legibility is how easily a reader can recognise and distinguish individual characters, such as telling a capital I from a lowercase l or a 0 from an O. It's mostly a property of the typeface's design. Readability is how easily a reader can take in and understand whole words, lines and paragraphs, and it depends mainly on how the type is set: size, line height, line length, spacing, contrast and layout. A legible typeface is a prerequisite for readable text, but it's not enough on its own. You can set a very legible font badly and end up with text that's tiring to read, and a typeface that's beautiful in a headline can be hard to read for a whole article.

The distinction matters because it tells you where to look when text feels hard work. If people misread codes, numbers or short labels, you probably have a legibility problem and need a different typeface or larger size. If people skim, give up halfway or lose their place, you probably have a readability problem and need to change the typesetting. In this article you'll learn what affects legibility and readability, how to test each, how they connect to WCAG requirements, and practical CSS that improves both.

Legibility: Can You Tell the Letters Apart?

Legibility is about the shapes of letters and how distinct they are from each other. It's what you care about in places where readers decode characters one at a time, such as passwords, product codes, licence plates, road signs and data tables.

Typeface Features That Improve Legibility

The features that help most are well documented in type design:

• Generous x-height: A tall lowercase relative to the capitals makes letters larger and more open at the same font size. See what the x-height is and why it affects readability for more detail.
• Open apertures: The openings in letters like c, e, a and s should be wide, so they don't close up and look like o at small sizes.
• Distinct similar characters: The capital I, lowercase l and number 1 should look different, for example with a serif, tail or hook. The same applies to 0 and O, rn and m, and 5 and S.
• Moderate stroke contrast: Very thin hairlines, as in Didone typefaces like Bodoni, can disappear at small sizes or on low-resolution screens.
• Clear spacing: Letters that are spaced too tightly start to merge, so rn reads as m and cl reads as d.

Typefaces designed for signage and screens often lean into these features. Frutiger was designed for the signage at Charles de Gaulle Airport. Verdana and Georgia were designed by Matthew Carter for Microsoft specifically for legibility on low-resolution screens. Atkinson Hyperlegible, released by the Braille Institute, exaggerates differences between similar characters for low-vision readers.

A Quick Legibility Test

The simplest test is a string of characters that are often confused. Paste it into a page with your candidate typefaces and view it at the smallest size you'll use:

<p class="legibility-test">Il1| O0 rn m cl d 5S 2Z 8B g9q</p>

.legibility-test {
  font-family: "Your Candidate", sans-serif;
  font-size: 14px;
  letter-spacing: normal;
}

If any pairs look the same, that typeface is a poor choice for codes, passwords or any text where a single misread character causes a problem.

For identifiers specifically, a monospace font with a slashed or dotted zero can also help, and you can sometimes switch it on with OpenType:

.order-id {
  font-family: "Your Mono Font", ui-monospace, monospace;
  font-variant-numeric: slashed-zero;
}

This only works if the font includes a slashed zero (zero feature), so check its feature list.

Readability: Can You Read It Comfortably?

Readability is about the reading experience over many lines. A reader's eyes don't move smoothly; they jump in small movements called saccades and pause on groups of letters. Good typesetting makes those jumps easy and helps the eye find the start of the next line.

Typesetting Factors That Affect Readability

These are mostly decisions you make in CSS, not choices built into the font:

• Font size: Body text that's too small forces readers to lean in. Around 16px to 20px is a common range for body text on the web, depending on the typeface.
• Line length: Lines that are too long make it hard to find the next line; lines that are too short break the rhythm. Somewhere around 45 to 75 characters is the traditional guidance.
• Line height: Too tight and lines blur together; too loose and paragraphs fall apart. About 1.4 to 1.6 times the font size suits most body text.
• Contrast: Low contrast between text and background is one of the most common causes of poor readability on the web.
• Alignment: Left-aligned text with a ragged right edge gives consistent word spacing. Justified text without hyphenation can create uneven gaps.
• Paragraph and heading structure: Clear headings, short paragraphs and lists help readers scan and keep their place.

Here's a baseline set of styles that addresses most of these at once:

:root {
  --text: #1f2328;
  --background: #ffffff;
}

body {
  background: var(--background);
  color: var(--text);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.125rem;   /* 18px at default browser settings */
  line-height: 1.6;
}

main p,
main li {
  max-width: 68ch;
}

main p + p {
  margin-top: 1em;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin-top: 2.5em;
  margin-bottom: 0.5em;
}

Readability Beyond Typography

The word readability is also used for the language itself, measured with formulas like Flesch Reading Ease that look at sentence length and syllables per word. That's a different, though related, concern. Short sentences, plain words and clear structure make content easier to read in any typeface. Typographic readability makes sure the setting doesn't get in the way of well-written text.

How Legibility and Readability Work Together

The two qualities support each other, but they're independent. It helps to think of four combinations:

Legibility	Readability	Example
High	High	A clear text face like Source Serif or Inter, set at 18px with comfortable spacing
High	Low	The same clear face set at 12px in light grey across a 1,200px-wide line
Low	Low	A decorative script set for a whole paragraph
Low	High (for short text)	A stylised display face used for a two-word headline at 64px

The last row is worth noting. A display typeface can be perfectly readable for a large headline even if its letters would be hard to tell apart at body size. Legibility requirements depend on how the text is used.

Size Changes Everything

Legibility depends heavily on size. A typeface with tight apertures and delicate details may be fine at 24px but fail at 12px. When you pick a typeface, test it at the smallest size it'll appear on your site, not just at the size in the specimen.

Legibility, Readability and Accessibility

Both qualities matter more for some readers than others. People with low vision, older readers, people with dyslexia, people reading in a second language and anyone reading on a small screen in bright sunlight benefit from text that's both legible and readable. Several Web Content Accessibility Guidelines (WCAG) success criteria address typographic readability directly.

Contrast (1.4.3 and 1.4.6)

At Level AA, normal text needs a contrast ratio of at least 4.5:1 against its background, and large text needs at least 3:1. Large text means at least 18 point (about 24px) or 14 point bold (about 18.66px). Level AAA raises these to 7:1 and 4.5:1.

Resize Text (1.4.4)

At Level AA, text must be resizable up to 200 percent without loss of content or function. Using rem or em units for font sizes, rather than fixing everything in pixels on containers with fixed heights, makes this much easier.

Text Spacing (1.4.12)

At Level AA, content must still work when a user overrides spacing to at least these values:

• Line height of 1.5 times the font size.
• Spacing after paragraphs of 2 times the font size.
• Letter spacing of 0.12 times the font size.
• Word spacing of 0.16 times the font size.

You don't have to use these values by default. You have to make sure nothing breaks, overlaps or gets cut off when someone applies them. You can test it with a small bookmarklet or by pasting this into your browser console:

const style = document.createElement("style");
style.textContent = `
  * {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
  }
  p {
    margin-bottom: 2em !important;
  }
`;
document.head.appendChild(style);

Look for text clipped inside fixed-height buttons, overlapping labels and truncated cards.

Visual Presentation (1.4.8)

This Level AAA criterion goes further and is a useful reference even if you don't target AAA. It asks that blocks of text are no wider than 80 characters, that text isn't justified, that line spacing within paragraphs is at least 1.5, and that paragraph spacing is at least 1.5 times the line spacing, among other requirements.

How to Test Readability and Legibility

You don't need a lab to find most problems.

1. Read your own pages at real size: View a long article on your phone and on a laptop at normal viewing distance. Notice where you lose your place or squint.
2. Test the smallest text: Captions, footnotes, form hints and table cells are where legibility usually fails first.
3. Check contrast with tools: Chrome DevTools shows the contrast ratio in the colour picker for text elements, and Firefox's Accessibility Inspector can check a whole page.
4. Zoom to 200 percent: Check that text reflows and nothing is cut off.
5. Apply the text spacing script: Use the snippet above and check for broken layouts.
6. Blur test: Squint or blur your vision slightly and look at a paragraph. If it turns into an even grey texture with clear paragraph breaks, the readability is likely good. If you see dark blobs, rivers of white or lines that merge, something needs adjusting.
7. Ask real readers: Short usability sessions where people read content and summarise it reveal problems that numbers miss.

Common Mistakes That Hurt Both

• Light grey body text: Fashionable, but it often fails contrast requirements and makes long reading tiring.
• Thin weights for body copy: Light and Extra Light weights lose strokes on many screens.
• Full-width paragraphs on desktop: Lines of 120 or more characters are hard to track.
• Tight line height inherited from headings: A line-height: 1.1 that suits a headline makes paragraphs cramped.
• Decorative fonts for long text: Script, condensed and display faces belong in short headlines, not in paragraphs.
• All caps for long passages: Capitals lack the varied shapes of ascenders and descenders, so whole sentences in caps are slower to read.

---

FAQ: Readability and Legibility

---

Conclusion

Legibility and readability describe two different levels of the reading experience. Legibility is about whether individual letters are distinct, and it comes mainly from the typeface: x-height, apertures, stroke contrast and how clearly similar characters are drawn. Readability is about whether text is comfortable to read in quantity, and it comes mainly from typesetting: size, line height, line length, contrast, alignment and structure.

When text feels difficult, diagnose which of the two is failing. Swap or enlarge the typeface for legibility problems, and adjust the CSS for readability problems. Test at real sizes, check against WCAG contrast and text spacing requirements, and you'll have text that people can both decode and actually enjoy reading.