Readability

Readability describes how comfortably extended text can be read over time — it operates at the level of paragraphs, pages, and books rather than individual characters. While legibility asks "can I identify this letter?", readability asks "can I read this passage for twenty minutes without strain?" The distinction is practically important because design choices that enhance legibility don't automatically produce readable text.

Readability is shaped by a constellation of typographic factors working together: typeface selection, font size, line length, line height, letter spacing, paragraph spacing, and contrast. Getting any one factor wrong can undermine an otherwise excellent type system.

Line length (measure) is one of the most impactful readability factors. Research consistently suggests optimal line lengths of 45–75 characters for single-column body text. Too short and the eye makes too many return sweeps; too long and finding the start of the next line becomes fatiguing:

article p {
  max-width: 65ch; /* ch unit = width of '0' in current font */
  font-size: 1.125rem;
  line-height: 1.7;
}

Line height (leading) needs to breathe. For body text, line-height values between 1.4 and 1.8 are generally appropriate, with larger values for wider columns or lighter typefaces. The ch unit is especially useful for constraining line length because it scales with the font.

Typeface selection matters enormously. Fonts designed for extended reading — like Merriweather, Lora, Source Serif 4, and Georgia — have characteristics that reduce fatigue: moderate stroke contrast, clear internal spacing, serifs that guide the horizontal flow of the eye, and proportions refined through centuries of book typography convention.

/* A readable body text system */
body {
  font-family: 'Merriweather', Georgia, serif;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.75;
  color: #1a1a2e;
  background: #fafaf8;
}

article {
  max-width: 70ch;
  margin-inline: auto;
}

Fluid typography using clamp() improves readability across device sizes by adjusting font size proportionally rather than having text be too small on mobile or too large on desktop.

Color and contrast affect readability differently from legibility. Pure black text on pure white (#000 on #fff) can cause halation — a kind of visual vibration on high-DPI screens — reducing readability in long passages. Slightly softened combinations (#1a1a1a on #fafaf8) are often more comfortable. But never reduce contrast below WCAG AA thresholds (4.5:1 minimum) chasing "softness" — low contrast destroys readability for users with visual impairments.

Readability testing goes beyond visual inspection. Real user testing with actual target audiences, particularly for technical documentation or long-form content, surfaces problems that designers adapt to through familiarity. Tools like the Flesch-Kincaid readability score address linguistic complexity, while typographic readability remains a matter of careful measurement and iteration.