How to Choose Accessible Web Fonts

Why font accessibility matters

Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Around 285 million people worldwide live with low vision. Dyslexia affects roughly 5–10% of the population. Font choice directly affects reading speed, comprehension, and comfort for all of these groups — and indirectly for everyone else.

WCAG 2.2 — the current Web Content Accessibility Guidelines published by the W3C — does not prescribe specific fonts. It sets measurable criteria: minimum contrast ratios, minimum text sizes, minimum text spacing. But font choice determines whether you can meet those criteria without compromising the design. A font with a tiny x-height at 16px is harder to read than one with a moderate x-height, even if both technically satisfy the size requirement.

Criterion 1 — x-height ratio

The x-height is the height of lowercase letters like a, c, e, o measured from baseline to top. The cap-height is the height of capital letters. The ratio between them is the single strongest predictor of readability at body sizes.

Fonts in the optimal range: Inter, Merriweather, Lora, Source Sans 3, Open Sans. Fonts on the low side: EB Garamond (traditional old-style proportions), Cormorant. High-contrast display fonts like Playfair Display sit at the high end and should be reserved for headings.

Check any font's x-height ratio using the Font Accessibility Checker — it reads the OS/2 table's sxHeight and sCapHeight fields and reports the ratio.

Criterion 2 — letterform clarity

Ambiguous letterforms force readers to spend additional cognitive resources distinguishing characters, which reduces reading speed and increases fatigue. The most critical pairs to check:

• l (lowercase L) vs I (uppercase i) vs 1 (digit one) — a font that renders these identically fails for anyone reading code, IDs, or alphanumeric strings
• O (uppercase o) vs 0 (digit zero) — critical in code, phone numbers, and serial numbers
• rn (r followed by n) vs m — a classic problem in humanist sans-serifs
• c (lowercase c) vs C (uppercase C) — must differ in size and often in terminal shape
• I vs l — must differ at minimum by height; ideal fonts add serifs or dots

Fonts that solve these well: Inter (uses a distinctive 1 with a flat top, and l with a curved tail), Source Code Pro, JetBrains Mono, IBM Plex Sans. Fonts that struggle: some geometric sans-serifs where circles and rectangles are the only distinction, and certain display fonts that sacrifice clarity for visual impact.

Criterion 3 — contrast ratio

Contrast is not a font property — it depends on the colors used with the font — but it is inseparable from font accessibility. WCAG 2.2 defines:

Verify any pair using the Text Contrast Checker. Note that contrast is calculated from the WCAG formula based on relative luminance, not from a simple hex difference.

Criterion 4 — weight and stroke

Stroke weight affects the amount of ink on the page, which affects perceived contrast and legibility:

• Body text — weight 400 minimum. Weight 300 at small sizes can be hard to read for low-vision users even when contrast technically passes.
• Small text (below 14px) — weight 400 or 500. Below this, use a font with a taller x-height and wider strokes.
• Headlines — weight 700 or higher is standard. Display fonts (Playfair, DM Serif Display) work at large sizes because their higher contrast becomes an asset rather than a liability.
• UI labels — weight 500 or 600 provides better contrast against typical backgrounds.

Check weight availability using the Font Weight Inspector, which reads the usWeightClass field.

Criterion 5 — spacing and density

WCAG 2.2 Success Criterion 1.4.12 (Text Spacing) requires that users can override text properties without breaking layout. This means:

• Line height — at least 1.5× font size for body text
• Letter spacing — at least 0.12× font size
• Word spacing — at least 0.16× font size
• Paragraph spacing — at least 2× font size

Fonts with very tight default spacing (some condensed sans-serifs) need explicit CSS overrides to meet these criteria. Fonts with naturally generous spacing (Merriweather, Spectral, Lora) work well by default.

Use the Line Height Calculator and Letter Spacing Calculator to compute compliant values.

Criterion 6 — reading speed

Some fonts slow reading more than others. The factors that matter:

• Familiarity — readers used to serif body text read serif fonts faster, and vice versa. Use fonts that match your audience's expectations.
• Distinctiveness — characters that look similar to each other slow reading. Fonts with distinct letterforms (humanist sans-serifs, classic serifs) read faster than geometric or decorative fonts.
• Word shape — humanist fonts have varied word shapes (ascenders and descenders of different heights) that help readers recognize words holistically. Monolinear geometric fonts have more uniform word shapes, which is slower for some readers.

The common advice that "sans-serif is more readable on screens" is outdated — modern high-DPI displays render both serif and sans-serif clearly. Choose based on your audience and content, not on outdated print-era advice.

Criterion 7 — dyslexia considerations

Dyslexia is a learning difference that affects reading fluency. Fonts specifically designed for dyslexic readers (OpenDyslexic, Lexie Readable) weight the bottom of letters to reduce letter flipping. However, the evidence for these fonts improving reading speed in controlled studies is mixed.

The most consistently effective interventions are:

• Increased letter spacing — small increases (0.05–0.1em) help
• Increased line height — 1.6–1.8× reduces crowding
• Sufficient contrast — not too low (illegible) and not too high (glare). Off-white backgrounds (e.g., #FAFAFA) often read better than pure white.
• Left-aligned text — justified text creates uneven spacing that dyslexic readers find harder
• Shorter line lengths — 60–75 characters per line, never more

For users with diagnosed dyslexia, the accessibility requirement is to let them override the font via browser or OS settings. Never use !important on font-family — it prevents user overrides.

Testing checklist

1. Contrast — verify every text/background pair with the Contrast Checker
2. X-height ratio — verify with the Accessibility Checker
3. Weight availability — confirm 400 and 700 are real weights, not synthesized
4. At 200% zoom — verify layout does not break, text does not clip
5. With screen reader — test with NVDA (Windows), VoiceOver (macOS/iOS), or TalkBack (Android)
6. At 320px viewport — verify no horizontal scroll and no clipping
7. With reduced motion — confirm animations are disabled
8. With user font override — verify the site remains usable when a custom font is forced

Recommended accessible fonts

Frequently asked questions