Accessible Typography for the Web: Font Choice, Sizing, and Line Spacing

Typography is the foundation of web reading. Get it wrong, and no other accessibility feature compensates for it. Get it right, and reading becomes effortless for a much wider range of people — including those with dyslexia, ADHD, low vision, and cognitive disabilities.

This guide covers the typographic choices that matter most for accessibility: font selection, sizing, spacing, and line length — and what the research and WCAG criteria say about each.

Font Choice

What makes a font accessible?

The most accessible fonts share a set of design characteristics:

• High letter differentiation — characters like b/d, p/q, l/1/I are easily distinguishable
• Open apertures — the openings in letters like c, e, and s are wide enough to read quickly
• Consistent stroke width — high stroke contrast (thick-thin variation) increases cognitive load
• Moderate x-height — taller lowercase letters relative to capitals improve legibility at small sizes

Recommended accessible fonts

System fonts (the native system-ui stack) are also a reasonable accessible choice — users have them locally, they render at optimal quality for the device, and they have no loading overhead.

Avoid for body text:

• Thin or ultra-light weights (below 300) — insufficient stroke weight at body sizes
• Decorative or script fonts — significantly impair comprehension for dyslexic readers
• All-caps body text — slows reading speed for everyone, more severely for dyslexic readers

How to apply accessible fonts to any website

If you're a developer building for a specific site, the choices above translate directly into CSS. If you want to let users choose their preferred font across any website, tools like FocusFlow let users switch between Lexend, OpenDyslexic, Atkinson Hyperlegible, and other accessible fonts on any page they visit.

Font Size

WCAG requirements

WCAG 2.1 doesn't mandate a minimum font size directly, but Success Criterion 1.4.4 (Resize Text) requires that text can be resized up to 200% without loss of content or functionality. This means:

• Don't fix font size in px alone if it prevents user scaling. Use rem for body text so browser text size preferences are respected.
• Avoid containers with overflow: hidden that clip text at 200% zoom
• Avoid fixed-height containers that don't accommodate enlarged text

Recommended sizes

16px is the practical baseline for body text — it's the browser default for a reason. Go smaller only for truly secondary text, and never below 11px for anything meaningful.

For users with low vision, 18px+ for body text is strongly recommended. The jump from 16px to 18px meaningfully reduces eye strain for readers with moderate vision impairment.

Use rem, not px

/* Bad: ignores browser text size setting */
body { font-size: 14px; }

/* Good: respects user's browser preference */
body { font-size: 1rem; } /* 1rem = browser default = 16px typically */

A user who has set their browser to 20px base size relies on rem-based layouts. Pixel-locked fonts override their preference.

Line Height

Line height (leading) is one of the highest-impact typography adjustments for readability. Too tight, and readers lose their place between lines. Too loose, and the relationship between lines breaks down.

WCAG 1.4.12 — Text Spacing

WCAG 2.1 SC 1.4.12 requires that when a user applies the following text spacing overrides, no content or functionality is lost:

• Line height: at least 1.5× font size
• Letter spacing: at least 0.12× font size
• Word spacing: at least 0.16× font size
• Spacing after paragraphs: at least 2× font size

Your layout must not break when these values are applied. Test with the Text Spacing bookmarklet (inject these exact values and verify nothing clips or overflows).

Recommended defaults

body {
  font-size: 1rem;        /* 16px base */
  line-height: 1.6;       /* 25.6px — exceeds WCAG minimum of 1.5 */
  letter-spacing: 0.01em; /* Subtle — 0.16px at 16px */
}

p {
  max-width: 70ch;        /* See: line length */
  margin-bottom: 1.5em;   /* Paragraph spacing */
}

For dyslexic readers specifically, line heights of 1.7–2.0× are often more comfortable. Users can adjust this with browser extensions; your defaults just need to not be restrictively tight.

Letter Spacing and Word Spacing

Letter spacing

Slight positive letter spacing (tracking) improves legibility for many readers, especially at small sizes. The British Dyslexia Association recommends 0.35px letter spacing as a starting point for dyslexia-friendly text.

/* For body text */
p { letter-spacing: 0.02em; } /* ~0.32px at 16px */

/* For headings — more aggressive is fine for display sizes */
h1 { letter-spacing: -0.02em; } /* Tight tracking is standard for large display text */

Avoid letter spacing on all-caps text tighter than 0.05em — condensed all-caps is significantly harder to read.

Word spacing

Normal word spacing is usually sufficient. For users who find words run together, slight increases help:

p { word-spacing: 0.05em; }

Don't go beyond 0.25em — excessive word spacing makes reading feel disconnected.

Line Length

Long lines of text require more eye travel and increase the chance of losing your place between lines. Short lines interrupt flow and cause excessive saccades (eye jumps).

The readable sweet spot: 60–80 characters per line for body text. The ch unit in CSS is measured as the width of the 0 character, making it a convenient approximation:

article p {
  max-width: 70ch; /* ~70 characters wide */
}

/* For content with a sidebar */
.main-content {
  max-width: 65ch;
}

For readers with dyslexia, shorter lines (60–65 characters) are often easier — there's less distance for the eye to travel when returning to the start of the next line.

Text Alignment

Always use left-aligned text (or right-aligned for RTL languages) for body content. Justified text — where spacing is stretched to fill the full width — creates irregular word spacing called "rivers," which are particularly disruptive for dyslexic readers.

/* Good */
p { text-align: left; }

/* Bad for body text */
p { text-align: justify; }

Centered text is appropriate for short headings and UI labels, but not for multi-line body content.

Color and Contrast for Text

Typography accessibility and color contrast are inseparable. Your carefully chosen accessible font is undermined by insufficient contrast. WCAG 2.1 requires:

• 4.5:1 for normal text (< 18px regular or < 14px bold)
• 3:1 for large text (≥ 18px regular or ≥ 14px bold)

Use the FocusFlow Color Contrast Checker to verify every text-and-background combination in your design. For a deeper dive into the ratio thresholds, see WCAG Color Contrast Explained.

Putting It Together: A Typography Baseline

Here's an accessible CSS baseline you can adapt:

:root {
  --font-body: 'Lexend', 'Inter', system-ui, sans-serif;
  --font-size-base: 1rem;       /* 16px */
  --line-height-body: 1.6;
  --color-text: #1e293b;        /* Slate-900 — 16.7:1 on white */
  --max-line-length: 70ch;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

p, li, td {
  max-width: var(--max-line-length);
  margin-bottom: 1.5em;
  letter-spacing: 0.01em;
}

h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.01em;
}

This passes WCAG 1.4.4 (resize text), 1.4.12 (text spacing), and 1.4.3 (contrast) with slate-900 on white (16.7:1). It uses a legible font stack, comfortable line height, and readable line lengths as defaults.

Summary