Dyslexia-Friendly Web Design That Actually Helps (Hint: It's Not a Font)

Dyslexia-friendly web design is mostly not about fonts. The changes that measurably help — more space between letters, words, and lines; short sentences; plain language; dark text on a soft background — are laid out in the British Dyslexia Association’s Dyslexia Style Guide, and every one of them is ordinary CSS. The special “dyslexia fonts” you’ve seen marketed? Peer-reviewed studies keep finding they don’t improve reading at all.

That’s good news if you run a small-business site. You don’t need to buy anything. You need about a dozen deliberate choices, most of which make the site easier to read for every visitor.

Who dyslexia-friendly design helps

More people than almost any other accessibility fix. According to the Yale Center for Dyslexia & Creativity, dyslexia affects 20 percent of the population and represents 80 to 90 percent of all learning disabilities. Even conservative estimates put it at one in ten visitors — people trying to read your menu, your pricing, your checkout instructions.

Dyslexia is a language-processing difference, not a vision problem or an intelligence problem. Crowded letters, long justified lines, walls of text, and jargon all raise the effort it takes to decode words. Lower that effort and comprehension goes up — for dyslexic readers first, and for tired, distracted, or non-native readers right behind them. It’s a textbook case of the curb-cut effect, and it sits alongside the other cognitive barriers we cover in our guide to types of disabilities and the web barriers they hit.

Do special dyslexia fonts actually work?

No — and this is the most persistent myth in this space. Fonts like Dyslexie and OpenDyslexic use weighted bottoms and irregular letter shapes that are supposed to stop letters “flipping.” The research says the letter shapes do nothing.

A 2017 study in Annals of Dyslexia by Kuster and colleagues tested Dyslexie against Arial with 170 children with dyslexia, then replicated with 147 more children and added Times New Roman to the comparison. The conclusion: the font “neither benefits nor impedes the reading process,” and more children preferred Arial than Dyslexie.

The more interesting result came a year earlier. A 2016 study in the journal Dyslexia by Marinus and colleagues found struggling readers did read about 7 percent faster in Dyslexie than in standard Arial — but when the researchers widened Arial’s letter and word spacing to match Dyslexie’s, the difference disappeared. The benefit was never the letterforms. It was the space around them.

The practical takeaway: offering a dyslexia-font toggle is harmless, but it is not remediation, and shipping OpenDyslexic as your default fixes nothing. Put the effort into spacing and structure instead — the things the evidence actually supports.

What the British Dyslexia Association style guide recommends

The BDA’s Dyslexia Style Guide is the reference most accessibility teams work from, and it maps cleanly onto web design. Here is each recommendation and how to apply it on a website:

Notice what’s absent: nothing on that list costs money, and nothing requires a plugin. It’s a stylesheet and an editing pass.

Text spacing: the change with the strongest evidence

If you only fix one thing, fix spacing — the Marinus study above showed it’s where the entire measured benefit lives, and it’s the one dyslexia-related requirement written directly into the compliance standard.

WCAG success criterion 1.4.12 Text Spacing (Level AA) requires that nothing breaks — no clipped text, no overlapping buttons, no lost content — when a reader bumps line height to 1.5 times the font size, paragraph spacing to 2 times, letter spacing to 0.12 times, and word spacing to 0.16 times. The W3C’s stated rationale names this audience directly: “People with dyslexia may increase space between lines, words, and letters to increase reading speed.”

Note what the criterion actually demands: not that you ship those values, but that your layout tolerates them when a user applies a bookmarklet, browser setting, or custom stylesheet. Fixed-height containers and cramped buttons are the usual failures. We break down the criterion, with pass and fail examples, on our WCAG 1.4.12 Text Spacing page.

Sensible defaults that satisfy both the BDA guidance and real users: line-height: 1.5 on body copy, visible space between paragraphs, and no CSS that sets negative letter spacing to squeeze a headline.

Color and background: light, but not white

The BDA guide recommends dark text on a light background — and specifically warns that pure white “can appear too dazzling,” suggesting cream or a soft pastel instead. It also advises single-color backgrounds (no patterns or watermarks behind text) and avoiding green and red/pink combinations, which fail for color-blind visitors too.

There’s a trap here: soften the background too far, or lighten the text to match a muted palette, and you fail WCAG 1.4.3 Contrast (Minimum), which requires 4.5:1 for normal text. The two goals are compatible — an off-white like #FAF7F0 with #1A1A1A text is gentle and passes easily — but you have to check the math. Run your combination through our free color contrast checker before it ships.

Write so people can actually read it

Half the BDA guide is about words, not pixels, and this is where most small-business sites lose dyslexic readers. The guidance: active voice, short simple sentences (60 to 70 characters is optimal), everyday words instead of jargon, no double negatives, and expanded abbreviations on first use.

Structure carries the rest. Frequent, honest headings let a reader who finds decoding expensive skip to what they need instead of reading linearly — which is also exactly how screen reader users move through a page. That only works if your headings are real h2 and h3 elements in a logical order, not bolded paragraphs; our guide to heading structure and landmarks shows how to get that right. Support text with images, flowcharts, and icons where they genuinely explain something.

And let readers resize. Text must scale to 200 percent without loss of content under WCAG 1.4.4 Resize Text — another Level AA requirement that dyslexic readers lean on daily.

How do you test your site for dyslexia friendliness?

Work through this checklist on your highest-traffic page — it takes about fifteen minutes:

1. Measure your body text. Open dev tools or zoom to check: is it at least 16px with line-height around 1.5? Are text columns 60-70 characters wide?
2. Apply the WCAG text-spacing values. Use a text-spacing bookmarklet (linked from the W3C’s 1.4.12 page) and watch for clipped or overlapping text.
3. Hunt for justified text and all caps. Check headings, navigation, buttons, and footers — text-transform: uppercase hides in components.
4. Check contrast on your real background. Test your exact text/background pairs at 4.5:1, especially if you use a cream or pastel base.
5. Read your key page aloud. Long sentences you stumble over, jargon, and double negatives will trip a dyslexic reader far harder.
6. Try to resize. Zoom to 200 percent. If content disappears or overlaps, you have a failure that hits dyslexic and low-vision visitors alike.

Where this fits in your compliance picture

Here’s the honest caveat: automated scanners catch some of this — contrast failures, tiny text — but no scanner can judge whether your sentences are readable or your headings are honest. Cognitive accessibility is the clearest example of why manual review has to sit alongside automated testing.

It still pays to know your baseline. A scan will flag the mechanical failures — contrast, text that can’t resize, markup problems — in a few minutes, and that list is the natural starting point for the fixes above. Run a free accessibility scan and see what a fifth of your visitors are working around right now.