Articles · Accessibility · 23 March 2026 · 9 min read

Typography and Accessibility: Choosing Readable Fonts

Roughly one person in ten reading your site does so with low vision, dyslexia, or ageing eyes — and everyone reads on a cracked phone in sunlight eventually. Accessible typography isn't a special mode; it's the same craft with the tolerances tightened. Here's what the evidence supports, what WCAG actually requires, and what's myth.

Font choice: distinctiveness beats classification

The research consensus is inconvenient for anyone hoping for a magic font: no single typeface classification is reliably "more accessible". What does measurably matter is character distinctiveness — whether the letters most easily confused can actually be told apart:

  • The I/l/1 test. Capital I, lowercase l, and the numeral 1 should have visibly different forms. Helvetica and Gill Sans fail; Verdana, Source Sans, and Atkinson Hyperlegible pass loudly.
  • Mirror pairs. In some fonts b/d and p/q are perfect mirror images, which some dyslexic readers find harder; fonts with asymmetric details help.
  • Open apertures. A c that nearly closes reads as o at small sizes or low acuity; open forms degrade gracefully.
  • Roomy spacing and counters. Tightly packed letters blur together under blur — literally.

A font worth knowing: Atkinson Hyperlegible, commissioned by the Braille Institute specifically to maximise character differentiation for low-vision readers, and free. It looks like a normal humanist sans — which is the point. Verdana, designed for tiny 90s screens, remains quietly excellent for the same reasons.

The dyslexia-font myth

Special "dyslexia fonts" with weighted bottoms have not outperformed ordinary clear fonts in controlled studies; several found readers do no better, or prefer familiar fonts. What consistently does help dyslexic readers: larger sizes, generous letter and line spacing, short lines, and left-aligned text. Spend your effort there rather than on a novelty typeface — though if an individual reader prefers one, their preference wins; accessibility is not won by averages.

Size, spacing, and line length: where the real gains are

  • Body size: 16px minimum on the web; 18–20px is kinder for long reading. Respect user zoom — WCAG requires text to survive 200% zoom without loss of content, so use relative units (rem) and never disable pinch-zoom.
  • Line height (leading): around 1.5 for body text — the figure WCAG 1.4.12 uses. Cramped leading is the most common accessibility defect on otherwise well-designed sites.
  • Line length (measure): 45–75 characters; long lines make it hard for eyes to find the next line's start. max-width: 65ch solves it in one declaration.
  • Paragraph spacing over indents, left-aligned text over justified — justified text without proper hyphenation creates rivers of white space that derail tracking, and WCAG's reading-adaptation criteria discourage it.
  • Letter spacing: per WCAG 1.4.12, your layout must not break if users override spacing (line height 1.5×, letter spacing 0.12em, word spacing 0.16em). Avoid fixed-height text containers and this passes itself.

Contrast: the numbers that are actually law-adjacent

WCAG 2.x requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt/24px regular, or 14pt/18.7px bold) against its background — and this is the accessibility rule most often written into procurement requirements and legislation. Three practical notes:

  1. The trendy grey-on-white (#999 on #fff is 2.8:1) fails. Darken the grey; a soft near-black like #3a3a3a passes with room to spare and still looks gentle.
  2. Thin fonts cheat the numbers. A 100-weight font can pass the ratio and still be unreadable, because the strokes themselves carry too few pixels. Keep body text at weight 400+; avoid Light below ~18px.
  3. Pure black on pure white, meanwhile, is too harsh for some readers (glare, and some dyslexic readers report letter "swimming"); off-black on off-white satisfies everyone.

Any contrast checker — browser devtools include one — gives you the ratio in seconds. There is no excuse for shipping a failure you can measure for free.

Things that pass unnoticed until they don't

  • Italics and all-caps in long runs slow most readers; keep both for short emphasis.
  • Fake bold/italic (browser-synthesised when the real style isn't loaded) distorts letterforms — load the true styles.
  • Text in images can't be resized, recoloured, or read aloud. Real text, always.
  • Animation of text (including scroll-triggered type effects) needs a prefers-reduced-motion escape hatch.
  • Semantic structure — proper <h1>–<h3> order, real lists, real paragraphs — is typography for screen-reader users. Visual hierarchy without markup hierarchy excludes them from it.

A checklist you can run today

  1. Body text ≥16px, weight ≥400, line height ~1.5, measure ≤75ch, left-aligned.
  2. Contrast ≥4.5:1 measured, not eyeballed.
  3. Fonts pass the I/l/1 and mirror-pair tests.
  4. Zoom to 200%: everything still usable?
  5. Headings are real headings; emphasis is real <strong>/<em>.

None of this constrains good design — it is good design, applied at the tolerances real readers need. The sites that feel effortlessly readable are almost always the ones quietly passing every item on this list.