EZUD Typography and Readability: Dyslexia-Friendly Design
Typography and Readability: Dyslexia-Friendly Design
Typography decisions affect every user, but they disproportionately affect the estimated 10-15% of the population with dyslexia and the additional millions with low vision, cognitive impairments, or reading in a non-native language. Choosing readable typefaces, appropriate sizing, and generous spacing is not aesthetic preference — it is a universal design imperative.
What Makes Text Hard to Read
Dyslexia causes letters to appear to swap, rotate, or merge. Conditions like low vision, ADHD, and age-related cognitive decline compound the problem. Even neurotypical users read more slowly and with more errors when typography is poorly set.
The main readability barriers in digital typography:
- Mirrored letterforms. Typefaces where b/d, p/q, and m/w are exact mirrors cause confusion for dyslexic readers.
- Tight letter spacing. Letters that crowd together blur into indistinct shapes.
- Narrow line spacing. Lines that are too close cause readers to lose their place when moving to the next line.
- Long line lengths. Lines exceeding 80 characters force eye movements that increase the chance of losing the current line.
- Low contrast. Insufficient contrast between text and background strains all readers. See color contrast standards.
- Justified text. Full justification creates uneven word spacing (“rivers” of white space) that disrupts reading flow.
WCAG Requirements for Text Readability
WCAG 2.2 does not prescribe specific fonts but sets requirements that directly affect typography:
| Criterion | Level | Requirement |
|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | 4.5:1 for normal text, 3:1 for large text |
| 1.4.4 Resize Text | AA | Text resizable to 200% without loss of content |
| 1.4.8 Visual Presentation | AAA | Line length under 80 characters, line spacing 1.5x, paragraph spacing 2x, no justified text |
| 1.4.12 Text Spacing | AA | Users can override spacing without content loss |
SC 1.4.12 is particularly relevant: users must be able to set line height to at least 1.5x font size, paragraph spacing to 2x font size, letter spacing to 0.12em, and word spacing to 0.16em — and the layout must not break.
Choosing Readable Typefaces
Characteristics of Dyslexia-Friendly Fonts
- Distinct letterforms. The letters b, d, p, q should not be rotations of each other. The letters I, l, and 1 should be visually distinct.
- Open counters. The enclosed or semi-enclosed spaces in letters like a, e, c, and s should be generous so letters do not appear to collapse.
- Consistent stroke width. High-contrast serif fonts (thin strokes alternating with thick) create visual noise. Moderate or low stroke contrast is easier to process.
- Generous x-height. A tall x-height relative to the cap height makes lowercase text appear larger and more legible at small sizes.
Recommended Fonts
| Font | Type | Notes |
|---|---|---|
| Atkinson Hyperlegible | Sans-serif | Designed by the Braille Institute specifically for low-vision readability. Exaggerated distinctions between similar letterforms. |
| Lexie Readable | Sans-serif | Designed for dyslexic readers. Unique letter shapes prevent mirroring confusion. |
| OpenDyslexic | Sans-serif | Weighted bottoms on letters to create a visual anchor. Polarizing aesthetically but functionally effective for many dyslexic readers. |
| Inter | Sans-serif | High x-height, open apertures, distinct letterforms. Widely used in UI design. |
| Source Sans Pro | Sans-serif | Clear letterform differentiation, generous spacing, good at small sizes. |
| Georgia | Serif | Screen-optimized serif with high x-height and clear counters. |
Avoid decorative, script, or ultra-thin fonts for body text. Thin weights (100-200) of any typeface reduce readability at body text sizes.
Setting Type for Readability
Font Size
- Minimum body text: 16px (1rem). This is the browser default for good reason. Going below 16px for body text is a readability risk for most users.
- Respect user preferences. Use relative units (
rem,em) so text scales with browser and OS font size settings.
Line Height
- 1.5x the font size is the minimum for body text (WCAG AAA). For dyslexic-optimized content, 1.6-1.8x is better.
- Headings can use tighter line height (1.2-1.3x) because they are typically short.
Line Length
- 45-75 characters per line is the optimal range. The sweet spot for most reading contexts is around 65 characters.
- Use
max-widthon content containers:max-width: 70chis a reliable constraint.
Letter and Word Spacing
- Default letter spacing in most fonts is adequate. Avoid negative
letter-spacing. - For dyslexia-optimized contexts, increase letter spacing by 0.05-0.12em.
- Ensure your layout tolerates user overrides up to 0.12em letter spacing and 0.16em word spacing per WCAG SC 1.4.12.
Paragraph Spacing
- Space between paragraphs should be at least 1.5x the line spacing (equivalent to a blank half-line). This helps users distinguish paragraph breaks from line breaks.
Alignment
- Left-align body text (or right-align for RTL languages). See our internationalization guide for RTL considerations.
- Avoid justified text for body content. The uneven word spacing it produces is a documented barrier for dyslexic readers.
- Center-aligned text is acceptable only for short headings and labels.
Allowing User Customization
The highest-impact accessibility feature you can provide is letting users customize their reading experience:
- A font-size toggle (small/medium/large) or slider.
- A line-spacing adjustment.
- A font-family switcher (including an option like OpenDyslexic or Atkinson Hyperlegible).
- Dark mode or a contrast theme switcher.
Even without custom controls, your layout must not break when users apply their own overrides through browser settings or extensions.
Key Takeaways
- Choose typefaces with distinct letterforms, open counters, and generous x-height.
- Set body text at 16px minimum, line height at 1.5x, and line length at 45-75 characters.
- Left-align body text and avoid justification.
- Build layouts that tolerate user-applied spacing overrides (WCAG SC 1.4.12).
- Offer customization options: font size, line spacing, font family, and contrast themes.
Next Steps
- Apply typography principles alongside cognitive load reduction techniques.
- Ensure your type system works within responsive design breakpoints.
- Review the full universal design guide for the broader framework these decisions fit into.
Sources
- WCAG 2.2 SC 1.4.12 Text Spacing — The requirement that layouts tolerate user-applied text spacing overrides.
- WebAIM: Typefaces and Fonts — Guidance on accessible typeface selection.
- The A11Y Project: Dyslexia-Friendly Design — Community guidance on dyslexia-accessible typography.
- MDN Web Docs: font-size — Developer reference for responsive font sizing with relative units.
Typography guidance synthesized from W3C WAI, the British Dyslexia Association Style Guide, and the Braille Institute’s Atkinson Hyperlegible design documentation.