What Are the Best Fonts for Dyslexic Readers?

A school district asks you to rebuild its parent portal, and one requirement in the brief stands out: "Use a dyslexia-friendly font." Someone on the committee has heard of OpenDyslexic, with its heavy weighted bottoms, and wants the whole site set in it. Another member has read that special dyslexia fonts don't actually help. Both are partly right, and the font you choose matters less than most people assume. How you set it matters a lot more.

This article looks at what dyslexia changes about reading, what the research says about specialized dyslexia fonts, which typefaces work well in practice, the spacing and layout settings that make the biggest difference, and how to give readers their own font choice without forcing one on everyone.

How Dyslexia Affects Reading

Dyslexia is a specific learning difference that primarily affects decoding: connecting written letters to sounds and recognizing words quickly and accurately. Estimates vary by definition, but somewhere around 5–10% of people have dyslexia to a degree that affects their daily reading, and more have milder difficulties.

Dyslexia is not a vision problem, and people with dyslexia don't literally see letters flipping around. But certain typographic features add friction to an already effortful process:

• Similar or mirrored letterforms such as b / d / p / q, and I / l / 1, increase the chance of misreading.
• Crowding, where letters and words sit too close together, makes it harder to isolate each one.
• Long, dense lines make it easy to lose your place when jumping back to the start of the next line.
• Visual stress, which some readers experience with high-contrast black on bright white, can make text seem to shimmer.
• Italic, all-caps, and underlined text remove the familiar shapes of words.

Good typography for dyslexic readers reduces these points of friction. Most of the time, it also helps everyone else.

Do Specialized Dyslexia Fonts Work?

Two fonts are marketed specifically for dyslexia:

• OpenDyslexic, a free, open-licensed font with heavily weighted letter bottoms meant to "anchor" letters and prevent rotation.
• Dyslexie, a commercial font with similar ideas, including enlarged openings and slanted strokes to make letters more distinct.

The research on both is consistently underwhelming. Controlled studies have generally found no significant improvement in reading speed or accuracy compared with standard fonts like Arial or Times New Roman:

Study	Font tested	Main finding
Rello & Baeza-Yates (2013)	OpenDyslexic and 11 others	Sans serif, monospaced, and roman fonts read faster; OpenDyslexic gave no advantage
Wery & Diliberto (2017)	OpenDyslexic	No improvement in reading rate or accuracy for students with dyslexia
Kuster et al. (2018)	Dyslexie	No benefit over Arial; extra letter spacing explained any small gains

That last point matters. Several studies that found small benefits from specialized fonts traced them to wider letter and word spacing, not the letter shapes. You can get that benefit with any well-designed font by adjusting spacing in CSS.

That said, some readers genuinely prefer OpenDyslexic and report that it feels easier. Preference and comfort count, especially for people who read slowly and with effort. The right conclusion isn't "never use dyslexia fonts." It's "don't force one on everyone, and don't expect it to replace good spacing."

What Makes a Font Dyslexia-Friendly?

When you compare candidate typefaces, look for these traits:

1. Distinct letter shapes. b and d should not be exact mirror images. A single-story a and a g with a simple form are sometimes easier for early readers.
2. Clear distinction between I, l, and 1. A tail on lowercase l or serifs on capital I help.
3. Generous x-height and open counters, so lowercase letters are easy to recognize.
4. Even, moderate stroke weight. Avoid fonts with hairline strokes or extreme thick-thin contrast.
5. Wider default spacing. Fonts designed with slightly looser letter spacing reduce crowding.
6. A sans serif or a simple, sturdy serif. Decorative, script, and condensed faces add load.

The British Dyslexia Association's style guide recommends sans serif fonts such as Arial, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, and Open Sans, at a size equivalent to 12–14pt (16–19px on screen). It also recommends larger spacing between letters and words.

The Best Fonts for Dyslexic Readers

These typefaces combine good research support or strong design rationale with practical availability on the web.

Lexend

Lexend is a family of variable-width typefaces developed with reading-proficiency research in mind. It has a large x-height, wide letterforms, and generous default spacing, and it comes in several widths (Lexend Deca through Lexend Giga) so you can choose how loose the text feels. It's free on Google Fonts, which makes it one of the easiest dyslexia-aware fonts to deploy.

Atkinson Hyperlegible

Created by the Braille Institute for readers with low vision, Atkinson Hyperlegible exaggerates the differences between commonly confused characters. Its distinctive l, I, 1, 0, and O also help dyslexic readers. The expanded Atkinson Hyperlegible Next family offers more weights.

Verdana

Designed by Matthew Carter for screens, Verdana has wide letters, a large x-height, and loose spacing. It's preinstalled on Windows and macOS, so it costs nothing to load.

Open Sans and Source Sans 3

Both are humanist sans serifs with open apertures, a comfortable x-height, and wide language support. They're reliable defaults if you need a familiar, neutral look.

Comic Sans and Comic Neue

Designers dislike it, but Comic Sans has irregular, distinct letterforms and is consistently mentioned by dyslexic readers as comfortable. Comic Neue is a cleaner open-source alternative. These fonts suit educational content for children better than corporate sites.

OpenDyslexic

Offer it as an opt-in reader preference rather than the site default. For users who like it, it's worth providing, and it's free to self-host.

Here's a quick comparison:

Font	Cost / source	Strengths	Best use
Lexend	Free, Google Fonts	Wide widths, large x-height, loose spacing	Default body text
Atkinson Hyperlegible	Free, Google Fonts	Highly distinct characters	Body text, forms, data
Verdana	Preinstalled	Wide, screen-optimized, no download	Fallback or system stack
Open Sans / Source Sans 3	Free, Google Fonts	Neutral, open apertures, broad language support	Corporate and product sites
Comic Neue	Free, Google Fonts	Informal, distinct shapes	Children's and education sites
OpenDyslexic	Free, open license	Preferred by some readers	Opt-in toggle only

If you're choosing a body font more generally, the best Google Fonts for body text has a broader shortlist.

Spacing and Layout Matter More Than the Font

If you take one thing from this article, take this: spacing, line length, and alignment have a bigger effect than the typeface. Here's a CSS baseline that follows dyslexia guidance and WCAG text spacing values:

.readable {
  font-family: "Lexend", Verdana, system-ui, sans-serif;
  font-size: 1.125rem;      /* 18px at default settings */
  line-height: 1.6;
  letter-spacing: 0.02em;   /* slight loosening, not extreme */
  word-spacing: 0.08em;
  max-width: 65ch;
  text-align: start;        /* never justify */
}

.readable p + p {
  margin-block-start: 1.25em;
}

.readable em {
  font-style: normal;
  font-weight: 600;         /* bold for emphasis instead of italic */
}

Key settings and why they help:

• Line height of 1.5 or more gives the eye a clear path back to the start of the next line.
• Line length of 60–70 characters reduces the distance the eye travels. Shorter is fine; much longer is not. The post on ideal line length for web content explains how to measure it.
• Left-aligned, ragged-right text. Justified text creates uneven word gaps and rivers that are especially disruptive. See why justified text is usually a bad idea on the web.
• Bold, not italic or underline, for emphasis. Italics slant and compress letters. Reserve underlines for links.
• Sentence case, not all caps. Capitals remove word shape. Keep uppercase to short labels.

Remember that WCAG 1.4.12 requires your layout to survive user overrides of up to 0.12em letter spacing, 0.16em word spacing, 1.5 line height, and 2× paragraph spacing. Many dyslexic readers use extensions that apply exactly those values, so test with them.

Color and Background Choices

Many dyslexic readers find pure black on bright white uncomfortable. A slightly softer combination can help while still keeping contrast well above WCAG's 4.5:1 minimum:

:root {
  --reading-bg: #fbf8f1;   /* warm off-white */
  --reading-text: #222222; /* near-black */
}

.readable {
  background-color: var(--reading-bg);
  color: var(--reading-text);
}

That pairing is still over 14:1. Don't go further and use light gray text to reduce glare; that trades one problem for a contrast failure. Some readers benefit from colored overlays or tinted backgrounds of their own choosing, which is another argument for user controls.

Let Readers Choose Their Font

The most inclusive approach is to set a well-spaced, legible default and let readers switch to an alternative. Here's a minimal implementation using a data attribute and a stored preference.

First, self-host OpenDyslexic and define it:

@font-face {
  font-family: "OpenDyslexic";
  src: url("/fonts/OpenDyslexic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root[data-reading-font="dyslexic"] body {
  font-family: "OpenDyslexic", "Lexend", sans-serif;
  letter-spacing: 0.05em;
  word-spacing: 0.15em;
  line-height: 1.8;
}

Then add a small client component in Next.js:

"use client";

import { useEffect, useState } from "react";

export function ReadingFontToggle() {
  const [dyslexic, setDyslexic] = useState(false);

  useEffect(() => {
    try {
      setDyslexic(localStorage.getItem("reading-font") === "dyslexic");
    } catch {}
  }, []);

  useEffect(() => {
    document.documentElement.dataset.readingFont = dyslexic ? "dyslexic" : "default";
    try {
      localStorage.setItem("reading-font", dyslexic ? "dyslexic" : "default");
    } catch {}
  }, [dyslexic]);

  return (
    <button type="button" aria-pressed={dyslexic} onClick={() => setDyslexic((v) => !v)}>
      Dyslexia-friendly font
    </button>
  );
}

Because the font file only downloads when the rule that uses it applies, readers who never turn on the toggle never pay for the extra file. For loading the default font efficiently, use next/font:

// app/layout.tsx
import { Lexend } from "next/font/google";

const lexend = Lexend({ subsets: ["latin"], display: "swap" });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={lexend.className}>
      <body>{children}</body>
    </html>
  );
}

Dyslexia Fonts FAQ

Conclusion

There's no magic font for dyslexia. The specialized options have not outperformed ordinary, well-designed typefaces in research, and much of their apparent benefit comes from extra spacing. What reliably helps is a legible sans serif with distinct letterforms, such as Lexend, Atkinson Hyperlegible, or Verdana, set at 18px or so with generous line height, moderate line length, left alignment, and bold instead of italics for emphasis.

Build that as your default, check that your layout survives user spacing overrides, and offer an opt-in toggle for readers who prefer OpenDyslexic or another alternative. That combination serves dyslexic readers far better than a single font choice made on their behalf.

Here are some useful references for going deeper on fonts for dyslexic readers:

1. British Dyslexia Association: Creating a Dyslexia Friendly Workplace — recommendations on fonts, sizes, spacing, and color.
2. W3C WAI: Understanding Success Criterion 1.4.12: Text Spacing — the spacing values your layout must tolerate.
3. Google Fonts: Lexend — the specimen page with widths, weights, and background on the project.
4. Braille Institute: Atkinson Hyperlegible Font — the design rationale behind its distinct letterforms.
5. W3C WAI: Cognitive Accessibility Guidance — broader guidance on making content usable for people with learning and cognitive disabilities.