Dyslexia Font Simulator
Adjustments
The right-hand pane is a comparison view, not a claim that a font cures dyslexia — the adjustable spacing and larger size are the parts backed by readability guidance.
Sample
Reading a long paragraph should feel effortless. When letterforms crowd together or lines run wide, the eye loses its place and the reader spends effort on navigation instead of meaning.
Reading a long paragraph should feel effortless. When letterforms crowd together or lines run wide, the eye loses its place and the reader spends effort on navigation instead of meaning.
.dyslexia-friendly {
font-family: "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif;
font-size: 19px;
font-weight: 450;
line-height: 1.8;
letter-spacing: 0.12em;
word-spacing: 0.16em;
max-width: 60ch;
text-align: left; /* never justify */
color: #1c1c1c;
background: #faf8f3; /* off-white, not pure white */
}You Might Also Need
The dyslexia font simulator places two renderings of the same paragraph side by side, one at browser defaults and one at settings chosen for dyslexic readers, and writes out the CSS that produces the second. It is a comparison tool rather than a font installer: you drive six sliders and read the values that change.
What is Dyslexia Font Simulator?
The dyslexia font simulator renders one text sample twice and exposes the difference as a set of numbers plus the declaration block that reproduces it, so a recommendation can be handed to a developer rather than described.
- Font size from 14px to 26px, defaulting to 19px, comfortably above the 16px browser norm.
- Line height from 1.2 to 2.4 in steps of 0.05, defaulting to 1.8.
- Letter spacing from 0 to 0.3em in hundredths, defaulting to 0.12em.
- Word spacing from 0 to 0.4em, defaulting to 0.16em.
- Reading measure from 30ch to 90ch, defaulting to 60 characters per line.
- Weight from 300 to 700 in steps of 50, defaulting to 450, so the text is slightly heavier than regular without reading as bold.
The settings follow the accepted style guidance for dyslexic readers rather than any single product: a larger sans face with generous tracking, wide leading, a short measure, ragged-right text and dark grey on off-white instead of maximum-contrast black on white. The generated rule names Atkinson Hyperlegible with Verdana and Tahoma behind it, sets text-align to left so the copy is never justified, and hard-codes the reading colours as #1c1c1c on #faf8f3. Next to the CSS the panel reports the characters-per-line target and converts the effective reading width to rem by multiplying the size by the measure and dividing by sixteen, which is the figure to quote in a layout review.
- The right-hand pane is a comparison, not a claim that any font cures dyslexia. The spacing and size controls are the parts supported by readability guidance.
- Only one stack is written. A different face has to be substituted by hand, and the tool cannot tell whether the named file is installed, so the fallbacks are what many readers will actually see.
- Six values are adjustable and nothing else: case, hyphenation, column count and alignment are pinned to the recommended settings.
- The toggle affects the preview pane only, so the CSS can be copied while the adjustment is switched off and the two will disagree.
- This is a browser rendering, not an assistive-technology test. It says nothing about screen reader output or about how the settings interact with a user stylesheet.
Hand the exported rule over as a starting point, treating it as accessible text settings rather than a prescription, and keep the measure between 45 and 70 characters: beyond that the eye has to hunt for the start of the next line, which is exactly the effort these settings exist to remove. Letter spacing past roughly 0.15em starts to break up word shapes, so take as much as the reader needs and no more. Body size is the other half of the problem on small screens, which is what the mobile font size checker examines, and where the goal is comparing faces for low-vision readers rather than tuning one, the low vision font tester is the closer fit. The line height optimizer covers leading at a fixed measure, and the letter spacing calculator covers tracking when the adjustment has to be applied to an existing design system.
How to use Dyslexia Font Simulator
- Paste your own paragraph into the sample field so both panes render text you care about, then set the size, leading, tracking, word spacing, measure and weight with the sliders.
- Compare the browser-default pane against the adjusted pane, watching the characters-per-line and reading-width readouts as the measure slider moves.
- Toggle the adjustment off and on to see how much of the improvement comes from spacing alone rather than from the named face.
- Copy the generated CSS block and the effective reading width, then hand both to whoever maintains the stylesheet.
When to use Dyslexia Font Simulator vs related tools
Use it when a reader has asked for more comfortable body text and you need to show what changes and by how much, or when a page of long-form copy is being tuned for a general audience and the default settings look tight. It is also a quick way to demonstrate to a stakeholder why justified text and a wide measure are a poor pairing for readers who lose their place. Where the underlying ability rather than the reading configuration is the question, the readability score calculator measures the prose, and the font accessibility evaluator evaluates a whole type specification against the WCAG criteria.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.