← Back to Docs
Recipe

Dyslexia-Friendly Typography

Typographic choices that reduce reading friction for users with dyslexia — sans-serif fonts, generous spacing, and high contrast without harsh white backgrounds.

Font Selection

Use sans-serif typefaces with distinct letterforms. OpenDyslexic, Atkinson Hyperlegible, and Lexend are purpose-built. Avoid italics and all-caps for body text — they reduce letter distinguishability.

Spacing & Line Height

Set line-height to at least 1.5. Letter-spacing of 0.05em and word-spacing of 0.16em prevent crowding. Paragraph margins should be 1.5× the line-height to create clear visual blocks.

Color & Contrast

Dark gray text (#1A1A1A) on off-white (#F5F5F0) reduces glare. Never use pure black on pure white. Tinted backgrounds — warm beige or soft pastel — lower visual stress during extended reading sessions.

Column Width

Cap line length at 60–70 characters. Wider columns force horizontal eye tracking that dyslexic readers find exhausting. Use max-width: 42rem on content containers.

Implementation

body {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  line-height: 1.6;
  letter-spacing: 0.05em;
  word-spacing: 0.16em;
  color: #1A1A1A;
  background: #F5F5F0;
}

p {
  max-width: 42rem;
  margin-bottom: 1.5em;
}