Dyslexia friendly website design: what helps beyond special fonts
The changes that help dyslexic readers most are the ones that help everyone: generous spacing that readers can widen further, lines of moderate length, left-aligned text, clear headings and short, plain sentences. Specialised dyslexia fonts get a lot of attention, but studies of them haven't found a reliable benefit; a clear, familiar sans-serif at a comfortable size does the job.
Dyslexia and reading on screens
Dyslexia mainly affects how people decode written words: matching letters to sounds, recognising words quickly and keeping track of place in a line. It varies widely between people and has nothing to do with intelligence. On a website, that means dense blocks of text, long lines, crowded letters and complicated sentences cost more effort than they do for other readers, and people are more likely to give up and leave. Most of the fixes are ordinary good typography and writing, applied with a little more care.
What about dyslexia friendly fonts?
Several typefaces have been designed specifically for dyslexic readers, usually with heavier bottoms to letters and exaggerated differences between shapes like b and d. They're popular, and some readers say they like them. The research is less encouraging. A study by Wery and Diliberto, The effect of a specialized dyslexia font, OpenDyslexic, on reading rate and accuracy, compared it with Arial and Times New Roman for students with dyslexia and found no improvement in reading speed or accuracy; none of the students said they preferred it.
So there's no need to change your typeface for dyslexic visitors. What matters more is that the font you use has clearly distinct letterforms (a capital I that isn't identical to a lowercase l, open counters on a, e and c) and is set large enough with enough space. Readers who do prefer a particular font can set it in their browser or with an extension, provided your layout survives the change.
Readable website design, point by point
- Size
- Body text at 16px or larger, with headings clearly bigger, so the hierarchy is visible at a glance. See website body font size.
- Spacing
- Line height around 1.5 for body text and clear space between paragraphs. Never fix the height of text boxes, so readers can increase spacing without text being cut off.
- Line length
- Moderate lines, roughly 60 to 70 characters, make it easier to find the start of the next line.
- Alignment
- Left-aligned, ragged right. Justified text creates uneven gaps between words that can form distracting channels down the paragraph.
- Emphasis
- Bold for emphasis. Long runs of italics, underlining that isn't a link, and whole sentences in capitals are harder to read.
- Contrast
- Strong but not harsh. Dark text on an off-white or cream ground is gentler than pure black on pure white for some readers, and still passes contrast checks.
- Busy backgrounds
- No text over patterns or photos without a solid panel behind it.
Let readers adjust
Because dyslexia varies so much, the most useful thing a layout can do is not get in the way of people's own settings. WCAG's Text Spacing criterion, at level AA, asks that nothing is lost when someone widens letter spacing to 0.12 times the font size, word spacing to 0.16, line height to 1.5 and paragraph spacing to 2. It notes that people with dyslexia may increase spacing to read faster. Test it: apply those values with a bookmarklet or browser extension and look for clipped buttons, overlapping cards and text escaping its container.
- Size containers so they grow with their text, rather than giving them fixed heights.
- Make sure the page works with the reader's own font, colour and zoom settings; see zoom and reflow.
- Don't put essential text inside images, where none of these settings can reach it.
Writing does as much as type
The W3C's guidance on making content usable for people with cognitive and learning disabilities puts clear language at the centre: common words, simple tenses, literal phrasing, short chunks of text and one instruction at a time. For a small business site, that means:
- Put the answer first: what you do, where, and how to get it.
- Keep most sentences under about 20 words.
- Use headings that say what's in the section, so people can skip to what they need.
- Turn sequences into numbered steps and lists of options into bullets.
- Avoid idioms and wordplay in headlines; they're easy to misread.
- Give dates and times in one consistent, written-out format.
How Anticode helps, and where you come in
Anticode's design systems take care of most of the typographic points: body text between 16.5 and 19.5px depending on the system, left-aligned paragraphs, one sans-serif family per site, and measures kept short of the full page width. The Critic flags body text under 16px, and the design gate blocks pages with any serif type and pages without visible keyboard focus. Each system uses an off-white or tinted ground in its light theme rather than pure white, apart from Swiss, which keeps plain white.
The writing is yours. Anticode drafts copy from your brief, and you can edit every word in place in the visual editor, but whether sentences are short and headings plain depends on what you ask for and what you keep. Read the page aloud before publishing; anything you stumble over, a dyslexic reader will too.
Questions people ask
Do dyslexia fonts actually help?
Studies such as Wery and Diliberto's found no improvement in reading speed or accuracy with OpenDyslexic. Spacing, size, line length and plain writing make more difference.
What font is best for dyslexic readers?
A clear, familiar sans-serif with distinct letter shapes, set at 16px or more with generous line spacing.
Is justified text bad for dyslexia?
It's best avoided. Justification creates uneven gaps between words; left-aligned text keeps spacing even.