Readability
The ease with which a reader can process and comprehend text on screen.
Plain English
Readability is the sum of many small typographic decisions: font size, line-height, line length, contrast, and weight. Get any one wrong and reading becomes work. Get them all right and content flows effortlessly. The most common readability problem on the web is text that's too small (below 16px), too light (poor contrast), or in lines that are too long — anything over about 75 characters per line forces the eye to search for the start of the next line.
Technical
Key readability metrics: optimal line length is 60–75 characters (set with max-width: 65ch or ~600px for 16px text). Minimum body font size: 16px (1rem). Minimum contrast ratio: 4.5:1 for normal text (WCAG AA). Optimal line-height for body copy: 1.5–1.7. Use system or humanist typefaces for body — geometric fonts like Futura are beautiful at large sizes but tiring to read in paragraphs.
Live Demo
Poor readability
Good typography is invisible — when done right, readers absorb the content without noticing the type. Poor choices in size, spacing, or contrast pull the reader out of the experience and create unnecessary friction.
- ✕text-xs (12px)
- ✕leading-none (1×)
- ✕Low contrast ink-400
- ✕No max-width
Good readability
Good typography is invisible — when done right, readers absorb the content without noticing the type. Poor choices in size, spacing, or contrast pull the reader out of the experience and create unnecessary friction.
- ✓text-base (16px)
- ✓leading-relaxed (1.625×)
- ✓High contrast ink-800
- ✓max-w-sm (~60 chars)
Optimal line length: 60–80 characters. Optimal line-height: 1.5–1.7×.
Usage
✓ Good usage
Set body copy to 16px / 1.6 line-height / max-width: 65ch / color: #0f172a on white (16:1 contrast) — these four values alone produce excellent readability.
✗ Bad usage
Setting article body copy to 13px, line-height: 1.2, in a 900px-wide container with grey text on white — every variable works against the reader simultaneously.
Recommended values
- Font size: 16px minimum for body copy
- Line height: 1.5–1.6 for body, 1.7–1.8 for small text
- Line length: 60–75 characters (max-width: 65ch)
- Contrast: 4.5:1 minimum (WCAG AA), target 7:1 for critical content
- Paragraph spacing: 1em between paragraphs
Common mistakes
- Text below 16px for body copy — small text increases cognitive load.
- Line lengths over 80–90 characters — readers lose their place on line return.
- Insufficient contrast (grey on white) that looks "subtle" in a lit studio but fails in sunlight.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Set all body copy to 16px, line-height: 1.6, max-width: 65ch, color: #1e293b on white. Space paragraphs 1em apart. Never use body text smaller than 16px.