Accessible Typography: A Practical Guide to Readable Web Type

Good typography is not just aesthetic — it determines whether people can actually read your content. Accessible type benefits users with low vision, dyslexia, or motor differences, and it improves comprehension and engagement for everyone. These guidelines align with the Web Content Accessibility Guidelines (WCAG) and are easy to apply.

Size and line height

• Base body size of at least 16px. Smaller text strains readers and fails on mobile. Many designs go to 18px for comfort.
• Line height of 1.5 or more for body text. Generous leading prevents lines from crowding and helps readers track from one line to the next.
• Line length of 45–75 characters. Lines that run too wide are hard to follow; too narrow breaks the reading rhythm.

Color contrast

WCAG requires a contrast ratio of at least 4.5:1 between text and its background for normal text, and 3:1 for large text (roughly 24px, or 18.66px bold). Light-gray text on a white background is one of the most common accessibility failures — test your colors with a contrast checker before shipping.

Spacing and resizing

• Let text resize. Use relative units (rem/em) so users can zoom to 200% without breaking the layout, as WCAG requires.
• Respect text-spacing overrides. Users may increase letter, word, and line spacing; avoid fixed heights that clip text when they do.
• Avoid justified text. Full justification creates uneven "rivers" of white space that hinder readers, especially those with dyslexia.

Choosing a readable typeface

Not all fonts are equally legible. For body text and interfaces, favor typefaces with:

• A tall x-height — taller lowercase letters are easier to read at small sizes.
• Open apertures — the openings in letters like c, e, and a should be generous so they do not collapse into o or look alike.
• Distinct letterforms — the capital I, lowercase l, and number 1 should be easy to tell apart (a problem in some geometric sans-serifs).
• Real weights, not faux bold. Use a font that ships a true bold rather than letting the browser synthesize one.

Typefaces designed specifically for legibility — such as Atkinson Hyperlegible, Inter, and Lexend — are excellent defaults. You can preview all of them in our Font Library.

Avoid these common pitfalls

• All caps for long text. Capitals remove the word-shape cues readers rely on; reserve them for short labels.
• Ultra-light weights for body copy, which lower effective contrast.
• Tight letter-spacing that fuses characters together.
• Text baked into images without alt text, which is invisible to screen readers and search engines.

Accessible typography and SEO pull in the same direction: clear, well-structured, readable text ranks better and serves more people. For our own commitments, see the accessibility statement.