Web Fonts for Dyslexia: The Letterform Guide Designers Actually Need

Web Fonts for Dyslexia: The Letterform Guide Designers Actually Need

You’ve spent three weeks building an accessible, inclusive website. You pick a font that looks clean, modern, and readable. Then someone emails you: “I have dyslexia and I kept reading ‘pbn’ instead of ‘pan.'” You stare at the screen and realize you never once looked at how your lowercase ‘p’, ‘b’, and ‘n’ actually differ from each other in that typeface.

That exact moment happened to a colleague of mine during a government education project. I’m Rohan Ratnayake, and I’ve spent the last 5 years as an inclusive UI/UX designer specializing in neurodivergent accessibility, and I’ve watched experienced designers pick fonts based entirely on aesthetics while completely ignoring the one thing that actually matters for dyslexic readers: whether individual letterforms can be told apart at a glance. We’d both been guilty of it. The project had to be redesigned three months in because the original font — a beautiful, minimal sans-serif — had seven letters that looked nearly identical when read under stress or fatigue.

The brutal truth is that most “dyslexia-friendly font” advice online stops at “use a sans-serif and increase spacing.” That’s not wrong, but it’s about 20% of the answer. The other 80% lives inside the actual anatomy of each letter. This guide breaks that down practically, letter by letter, so you can evaluate any font yourself — not just pick from someone else’s shortlist.


Why Letter Confusion Happens (And It’s Not What Most Guides Say)

Most articles blame dyslexia font problems on “visual stress.” That’s vague. The real mechanical issue is mirror symmetry in letterforms.

Letters like b, d, p, and q are literally the same shape rotated or flipped. In a font with no visual weight differentiation between those letters, the brain has to work harder to identify each one. For readers with dyslexia, this extra cognitive load compounds quickly — especially during longer reading sessions. Research published by the British Dyslexia Association confirms that letters with unique, differentiated shapes reduce reading errors significantly.

ALSO READ:  How to Fix Orphan Words in CSS With Text-Wrap: Balance (No JavaScript Needed)

So the question isn’t just “is this font clean?” It’s “does every letter have a distinct visual identity?”


The Letterform Pairs That Actually Cause Problems

Before evaluating any font, you need to know which letter pairs are the real culprits. These are the ones I check first in every typeface:

Problematic PairThe IssueWhat Good Fonts Do
b / dMirror image horizontallyAdd a tail or angled stem on one
p / qMirror image horizontallyDifferentiate bowl position or stem weight
n / uRotational flipAdjust curve entry angles
i / l / I (capital)Near-identical strokesAdd serifs, crossbars, or distinct terminals
0 / ONumber vs. letter confusionSlash through zero or change oval shape
a (single vs. double story)Open ‘a’ reads like an ‘o’Use double-story ‘a’ with a closed bowl
rn / mKerning collapseWider letter spacing + distinct arches

The rn / m problem is one most people miss entirely. In a narrow font with tight tracking, “torn” can read as “tom.” This isn’t a spacing issue — it’s a letterform density issue.


Evaluating Fonts Yourself: The 5 Anatomy Checkpoints

Here’s the actual framework I use before recommending a font for any neurodivergent-inclusive project.

1. The Lowercase ‘a’ Test

Does the font use a single-story ‘a’ (one bowl, like a circle with a stem) or a double-story ‘a’ (two bowls, like a typed ‘a’)? Single-story looks like a handwritten ‘o’ with a tail. This is one of the most common sources of confusion.

Fonts like Gill Sans use single-story ‘a.’ Fonts like Atkinson Hyperlegible use double-story ‘a.’ For dyslexic readers, double-story wins every time.

2. The ‘b/d/p/q’ Mirror Test

Print or render the four letters side by side: b d p q. Now squint. Can you still tell them apart? In a well-designed font, each letter should have at least one visual feature that breaks the symmetry — a curved foot, a heavier stroke on one side, or an angled stem entry.

3. The Capital ‘I’ vs. Lowercase ‘l’ vs. Number ‘1’ Test

Type this string: Il1 — now look. In many fonts, all three are vertical strokes with no distinguishing features. This creates real errors in reading phone numbers, product codes, and passwords. A dyslexia-friendly font either adds serifs to the capital ‘I’, a curved base to the lowercase ‘l’, or a serif cap to the number ‘1.’

ALSO READ:  CSS clamp() Explained: Write Zero Media Queries and Still Get Perfect Fluid Typography

4. The Ascender/Descender Height Ratio

Ascenders are the tall parts of letters like h, d, l. Descenders drop below the baseline in g, p, y. Fonts where ascenders and descenders are unusually short (common in condensed or compact typefaces) make letters harder to distinguish. A healthy ascender-to-x-height ratio is roughly 1.4:1 or higher.

5. Open Counters

The “counter” is the enclosed or partially enclosed space inside letters like e, c, a, and g. Fonts with tight, small counters — particularly a closed ‘e’ — make those letters hard to identify quickly. You want wide, open counters that don’t close up at small sizes.


The Fonts That Actually Pass This Test

Let me be direct: not every popular “accessibility font” holds up under these checks.

Atkinson Hyperlegible — Built by the Braille Institute specifically for low-vision readers, but its letterform differentiation logic maps perfectly to dyslexia-friendly design. The double-story ‘a’ and ‘g,’ the distinct ‘i’ with a dot clearly separated from the stroke, and the number ‘1’ with a flag serif are all deliberate. It’s currently the strongest free option available.

Lexie Readable — Designed explicitly with dyslexia in mind. The b/d pair have different foot treatments. The lowercase letters have slightly weighted bases that give the reader a visual “anchor” for orientation. The openness of the counters in ‘e’ and ‘c’ holds up even at 14px. Not the prettiest font — it looks a bit clunky — but it does the job.

OpenDyslexic — This one’s controversial. The concept is smart: heavier bottoms on letters give a weighted orientation cue so letters feel harder to flip mentally. In practice, the visual weight of the letters makes longer body copy hard to read for non-dyslexic users, and some dyslexic readers find it distracting rather than helpful. I’ve seen it work well in short labels and headings but not in paragraphs.

Verdana — Not purpose-built for dyslexia, but it passes most of these anatomy tests better than people expect. Wide character spacing, large x-height, and clearly differentiated letterforms. The double-story ‘a’ is clean. It’s not exciting, but it’s solid. The Web Content Accessibility Guidelines (WCAG) don’t mandate specific fonts, but the principles of distinguishability Verdana follows align closely with their readability guidance.

ALSO READ:  The CSS Line-Height Formula That Actually Stops Readers From Getting Lost

Georgia — A serif font that many accessibility guides dismiss because “serifs are harder to read.” This is an oversimplification. Georgia’s serifs actually help differentiate letters that look similar in sans-serif formats — particularly ‘i’, ‘l’, and ‘1’. Its letterforms are wide, the stroke contrast is moderate, and its x-height is generous.

FontDouble-Story ‘a’Distinct i/l/1b/d DifferentiationOpen CountersBest Use Case
Atkinson HyperlegibleBody copy, UI text
Lexie ReadableBody copy
OpenDyslexicModerateShort labels, headings
VerdanaModerateModerateGeneral web use
GeorgiaN/A (serif)✅ (serifs help)Long-form reading
Gill SansModerateAvoid for body text
FuturaTightAvoid entirely

What the Popular Advice Gets Wrong

The standard advice is “use a humanist sans-serif.” It sounds right. And humanist sans-serifs are generally better than geometric ones — but “humanist” isn’t a guarantee.

Gill Sans is technically a humanist sans-serif. It also has a single-story ‘a’, nearly identical b/d pair, and a capital ‘I’ that’s a plain vertical stroke. It fails most of the checks above. Futura is even worse — its letterforms are built on geometric circles and lines, which means maximum symmetry and minimum differentiation.

The typeface category matters less than the specific anatomy decisions made by the type designer. You have to actually look at the letters, not just the label on the font.


FAQs

Is a purpose-built dyslexia font always better than a standard font? Not automatically. A well-designed standard font like Verdana or Georgia can outperform a poorly executed “dyslexia font” on actual letterform differentiation. Judge the anatomy, not the marketing claim.

Does the double-story ‘g’ matter as much as the double-story ‘a’? It matters, but less frequently. The letter ‘g’ doesn’t appear in as many high-confusion pairs as ‘a’ does. The double-story ‘g’ (with two bowls) is still preferable because the single-story version can read like a ‘q’ or ‘9’ in some contexts. It’s a secondary check, not a primary one.

Should I avoid all geometric sans-serif fonts? For body copy on an inclusive website, yes. Geometric fonts prioritize visual consistency of shapes — which is the exact thing that makes letters hard to distinguish. Save them for logos or decorative headlines where individual letter recognition isn’t critical.


Wrapping Up

Picking a dyslexia-friendly font comes down to one discipline: looking at your letters as individual characters, not as a collective aesthetic system. The b/d mirror test, the Il1 string test, and the double-story ‘a’ check take about four minutes per font. Those four minutes will tell you more than any article that just lists “top 5 dyslexia fonts” without explaining why.

If you’re starting a project today and need a reliable choice, start with Atkinson Hyperlegible. Run it through the anatomy checkpoints above to build the habit. Then you’ll be able to evaluate any font that crosses your desk — not just the ones someone else already approved.