legibility

Control the five inputs to legibility: choose a typeface designed for the intended size, keep body text at 14-16px or larger, use regular weight at small sizes, meet WCAG contrast ratios of at least 4.5:1, and set comfortable tracking and leading. Test at actual size on real devices.

Legibility is the visual clarity of individual characters and short phrases, determined by typeface, size, weight, contrast, and spacing. Readability concerns sustained reading of prose, involving line length, leading, and paragraph rhythm. UI labels are legibility problems; long articles are readability problems.

Use a monospace typeface designed for character disambiguation, such as JetBrains Mono, Fira Code, or Source Code Pro, which clearly distinguish 0/O and 1/I/l. Alternatively, remove ambiguous characters like 0, O, I, 1, and L from the code alphabet entirely.

WCAG requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (at least 18pt or 14pt bold). These are floors, not targets; ratios of 7:1 or higher substantially improve legibility for low-vision users and poor viewing conditions.

Hairline and thin weights lose their strokes at small sizes, especially on lower-DPI displays or in glare, making characters disappear. Use regular or medium weights for body text and reserve light weights for large display headlines where strokes remain visible.

Use display typefaces only for headlines at large sizes, where their thin strokes and high contrast render correctly. Body copy needs typefaces designed for small-size legibility, such as Inter, IBM Plex Sans, or Source Sans, since display faces lose distinguishing features when scaled down.