Readability vs. Legibility: What's the Difference?

A support team I worked with kept getting tickets from customers who had typed their license keys wrong. The keys were displayed in a stylish geometric sans-serif where uppercase I, lowercase l, and the digit 1 were nearly identical, and O and 0 were the same shape. The page itself was pleasant to read — generous spacing, good size, sensible line length. The problem was not how the text flowed. It was that individual characters could not be told apart.

That is the difference between legibility and readability, two words designers often use interchangeably. They describe different problems with different fixes. This article defines both terms, shows which typographic properties affect each, and gives you practical CSS and font-selection techniques to improve them on your site.

Definitions: Legibility and Readability

Legibility is a property of the typeface. It describes how easily a reader can distinguish one character from another. It is decided mostly by the type designer: letter shapes, x-height, counters, stroke contrast, and spacing built into the font.

Readability is a property of the typesetting and the text. It describes how easily a reader can take in words, lines, and paragraphs over time. It is decided mostly by you: font size, line height, line length, contrast, alignment, hierarchy, and even the writing itself.

A short way to remember it:

• Legibility asks, "Can I tell what this letter is?"
• Readability asks, "Can I comfortably read this for five minutes?"

Aspect	Legibility	Readability
Unit of concern	Individual characters and glyphs	Words, lines, paragraphs, whole pages
Mainly controlled by	Type designer (font choice)	Typesetter, developer, writer
Key factors	x-height, counters, letter shapes, stroke contrast	Size, line height, line length, contrast, alignment, copy
Typical failure	Misreading Il1 or O0; blurry thin strokes	Fatigue, losing your place, skimming and leaving
Typical fix	Choose a different font	Adjust CSS and layout; edit the copy

The two depend on each other. A highly legible font can be set unreadably, and an illegible font cannot be rescued by perfect spacing.

What Makes a Typeface Legible

When you evaluate a font for legibility, look at the letterforms themselves. Our guide on the anatomy of a letterform explains the terminology used below.

X-Height

A larger x-height — the height of lowercase letters relative to capitals — makes text look bigger at the same font size and keeps lowercase shapes open on small screens. Most screen-oriented fonts have a generous x-height. See what x-height is and why it matters for detail.

Open Counters and Apertures

Counters are the enclosed or partly enclosed spaces inside letters like o, e, and a. Apertures are the openings in letters like c, e, and s. Wide apertures prevent c from looking like o and e from closing up at small sizes or low resolution.

Distinct Character Shapes

Check the problem groups:

• I (capital i), l (lowercase L), and 1 (one)
• O (capital o) and 0 (zero)
• rn versus m
• cl versus d
• 5 versus S, and 8 versus B

Fonts built for legibility differentiate these with tails, serifs, slashed or dotted zeros, and distinct numeral shapes. Atkinson Hyperlegible, designed by the Braille Institute, is a well-known example built specifically for this.

Stroke Contrast and Weight

Very thin strokes disappear on low-density screens and in bright light. High-contrast display serifs and hairline weights look elegant at headline size and become illegible at 14px. For body text, prefer moderate stroke contrast and regular weights of 400 or above.

Letter Spacing

Spacing built into the font matters. Tight default spacing makes letters collide at small sizes; overly loose spacing breaks words apart.

What Makes Text Readable

Readability lives in the CSS and the content. Even with a perfectly legible font, these factors decide whether people keep reading.

Font Size

Body text on the web should start at 16px and often benefits from 17–20px on content sites. Use rem so text respects user settings and survives 200% zoom (WCAG 1.4.4). Our article on the best font size for body text has the full reasoning.

Line Height

Line height around 1.5 for body copy is a reliable default and matches the spacing that WCAG 1.4.12 requires your layout to tolerate.

Line Length

Aim for 45–75 characters per line. Shorter lines cause choppy reading; longer lines make it hard to find the start of the next line.

Contrast

WCAG 1.4.3 requires 4.5:1 for normal text and 3:1 for large text. Pure black on pure white is fine for most readers, though slightly softened text such as #1f2328 reduces glare without hurting contrast.

Alignment

Left-aligned (ragged-right) text is the most readable default for left-to-right languages. Justified text creates uneven word spacing and rivers on the web; see why justified text is usually a bad idea.

The Writing Itself

Readability also refers to the text's language: sentence length, word familiarity, and structure. Formulas like Flesch Reading Ease measure this. Typography cannot fix a 70-word sentence full of jargon, so editing is part of the job.

A Readable Baseline in CSS

Here is a baseline that addresses the readability factors you control:

:root {
  font-size: 100%;
}

body {
  font-family: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #1f2328;
  background-color: #ffffff;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: auto;
}

.content {
  max-width: 68ch;
  margin-inline: auto;
  padding-inline: 1rem;
}

.content p {
  margin-block: 0 1.25em;
  text-align: start;
  hyphens: manual;
}

A note on text-rendering: optimizeLegibility: it enables kerning and standard ligatures in some browsers, but modern browsers already enable kerning by default for most text. It can be slow on very long pages in older engines, so treat it as optional.

Legibility Fixes for Specific Content

Some content types are legibility-critical even when the surrounding page is readable.

Codes, Keys, and Identifiers

License keys, coupon codes, order numbers, and passwords need unambiguous characters. Use a monospace font with a slashed or dotted zero, or enable OpenType features if your font supports them:

.license-key {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: slashed-zero tabular-nums;
  letter-spacing: 0.05em;
}

Better still, avoid ambiguous characters entirely when generating codes. Many systems exclude 0, O, 1, I, and l from their alphabet.

Numbers in Tables and Prices

Use tabular figures so digits line up in columns, and make sure the font's numerals are distinct. Our guide on tabular figures covers the CSS.

Small UI Text

Labels, captions, and helper text at 12–14px are where legibility problems show up first. Choose a font with a large x-height for UI, and avoid light weights at small sizes.

Text over Images

Legibility drops sharply when text sits on a busy background. Add a solid or gradient overlay so the contrast ratio is predictable, instead of relying on a text shadow.

.hero {
  position: relative;
  background-image: url("/images/hero.jpg");
  background-size: cover;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.2));
}

.hero h1 {
  position: relative;
  color: #ffffff;
}

How to Test Legibility

1. The confusables string. Type Il1 O0 rn m cl d 5S 8B in your candidate fonts at your body size and smallest UI size. Ambiguous pairs will be obvious.
2. Small-size test. Render the font at 12px and 14px on a standard-density (non-Retina) display. Thin strokes and closed apertures show up immediately.
3. Distance test. Step back from the screen or zoom the browser out to 50%. Legible fonts keep their letter shapes recognizable.
4. Blur test. Apply filter: blur(1px) to simulate low vision or poor screens. Fonts with open apertures degrade more gracefully.

How to Test Readability

1. Read a full article in the design. Not lorem ipsum, a real 1,500-word piece. Notice when you lose your place or get tired.
2. Check measure in characters. Count characters on a few lines or use ch units to cap width.
3. Run contrast checks with browser DevTools or the WebAIM contrast checker.
4. Apply WCAG 1.4.12 text spacing (line height 1.5, paragraph spacing 2 times the font size, letter spacing 0.12em, word spacing 0.16em) with a bookmarklet and confirm nothing overlaps or clips.
5. Test on a phone outdoors or with brightness turned down.

A quick text-spacing override for testing:

* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

p {
  margin-bottom: 2em !important;
}

When the Two Conflict

Sometimes the choices pull in opposite directions:

• Display fonts are often less legible but give headlines personality. That is fine at large sizes where legibility is easy; keep them out of body text. Our post on display fonts vs. text fonts covers where each belongs.
• Tight line height looks sleek on headings but hurts readability in paragraphs. Use 1.1–1.3 for headings and 1.5 or more for body.
• Brand fonts might be distinctive but less legible. Use them for headings and logos, and pair them with a highly legible text face.

---

Readability and Legibility FAQ

Conclusion

Legibility and readability are separate problems. Legibility is about characters, and you mostly solve it by choosing the right typeface for the job, especially for small UI text, codes, and numbers. Readability is about the reading experience over time, and you solve it with size, line height, measure, contrast, alignment, and clear writing.

When text feels hard to read, diagnose before you fix. If people are misreading characters, change the font. If people are getting tired, losing their place, or skimming and leaving, change the typesetting and the copy. Getting both right is what makes text disappear and the message come through.

Here are some useful references for going deeper on readability and legibility:

1. Google Fonts Knowledge: Readability and accessibility — an introduction to the factors that make type readable for everyone.
2. Braille Institute: Atkinson Hyperlegible Font — background on a typeface designed specifically for character differentiation.
3. W3C: Understanding Success Criterion 1.4.12: Text Spacing — the spacing values your layout must support.
4. MDN Web Docs: font-variant-numeric — enabling slashed zeros and tabular figures.
5. WebAIM: Typefaces and Fonts — accessibility-focused guidance on font choice and readability.