Design Atlas
한국어
◉ Accessibility

Dyslexia-Friendly Typography

난독증 친화 타이포그래피

Typography practices — generous letter/line spacing, a shorter measure, left alignment — that help dyslexic readers track a line without losing their place.

Also known as: Dyslexia-friendly text
···
html
<div class="stage">
  <div class="pane">
    <div class="tag">justify · 촘촘</div>
    <p class="txt tight">Reading a line of text should feel effortless not like decoding a puzzle every single time your eyes move across the page and back again.</p>
  </div>
  <div class="pane">
    <div class="tag">left · 여유</div>
    <p class="txt roomy">Reading a line of text should feel effortless, not like decoding a puzzle every time your eyes move.</p>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:20% 7% 8%;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 10px/1 ui-monospace,monospace;color:var(--muted)}
.txt{margin:0;color:var(--fg);font-size:clamp(9px,2.6vmin,12px)}
.tight{text-align:justify;line-height:1.15;letter-spacing:-.01em}
.roomy{text-align:left;line-height:1.75;letter-spacing:.03em;word-spacing:.06em;max-width:32ch}

Dyslexic readers often confuse similar letters or words and lose their place on a line. Tight letter spacing, cramped line height, and the ragged word gaps that justified text produces all make this worse. WCAG 1.4.12 (Text Spacing) requires that content survive a user stylesheet setting line height to 1.5×, paragraph spacing to 2×, letter spacing to 0.12em, and word spacing to 0.16em without breaking.

The common prescription in practice: **left-align** (justify creates irregular word gaps), keep the measure to 45–75 characters, set line height to 1.5× or more, avoid italics (the slant adds confusion) and use real bold for emphasis instead. Special fonts (OpenDyslexic and similar) are sometimes claimed to help, but the research is mixed — the spacing rules above are the more reliable fix.

Left is a dense, justified paragraph; right is the same paragraph reset with left alignment and generous letter spacing, line height, and measure.

When to use

Don't use text-align: justify on body paragraphs. Keep line height at 1.5 or more, and cap line length with a max-width in ch units so no line runs past ~75 characters.