The Dyslexia-Friendly Text Preview lets you see your own copy through the lens of the typographic adjustments that help many dyslexic and visually-sensitive readers. Instead of guessing whether your layout works, you tune spacing, size, and background tint with live sliders and judge readability directly on your own text.
How it works
The tool renders your pasted text in a preview pane and exposes the adjustments the British Dyslexia Association style guide recommends, applied as live CSS:
- Letter spacing (
letter-spacing) — extra space between characters reduces crowding and character-reversal confusion. - Word spacing (
word-spacing) — clearer gaps between words help tracking across a line. - Line height (
line-height) — at least 1.5× the font size keeps lines from visually running together. - Font size — a slightly larger size reduces the effort of decoding each character.
- Background tint — off-white, beige, or pale blue-grey cuts the glare of stark black-on-white.
Text is always left-aligned in the preview, never justified. Justified text creates uneven rivers of white space between words that disrupt reading for many dyslexic readers. A clean sans-serif font stack from fonts already on your device is used — nothing is downloaded or uploaded.
Why spacing matters more than font choice
The research on dedicated dyslexia typefaces (such as OpenDyslexic or Dyslexie) is mixed: several rigorous studies have found no consistent reading-speed or accuracy advantage over a standard clean sans-serif when spacing is equivalent. The evidence for increased spacing and reduced visual crowding is substantially stronger. This tool therefore focuses on the spacing and contrast controls rather than the font, which aligns with the British Dyslexia Association’s published guidance.
BDA recommended values — useful starting points
| Setting | BDA suggestion | Why |
|---|---|---|
| Letter spacing | 0.05em or more | Separates characters that look similar (b/d, p/q) |
| Word spacing | 0.16em or more | Clearer word boundaries |
| Line height | 1.5 to 2.0 | Prevents line tracking errors |
| Font size | 12–14pt minimum for print; 16px+ for screen | Reduces decoding effort |
| Background | Cream, beige, or pale blue-grey | Reduces glare; many dyslexic readers report preference |
These are starting values, not fixed requirements. Dyslexia is diverse — what helps one reader may not help another. The slider controls exist precisely so each person can tune to their own comfortable setting.
Practical uses
Publishers and web designers: Paste a block of your body copy and check whether it meets the BDA layout recommendations before publication. Adjust line height or letter spacing until the preview is comfortable, then apply those CSS values to your stylesheet.
Teachers and authors: Preview classroom handout text or book passages before printing. A cream background and 14pt text with generous line height can significantly reduce reading difficulty for students.
Accessibility checkers: The tool is a fast qualitative check, not a formal WCAG audit, but it surfaces layout issues that automated contrast checkers miss — particularly spacing and line-length problems.
Personal reading: Readers who struggle with standard web typography can use this to find their preferred spacing settings and note them down for use in browser reader-mode or local CSS overrides.