Accessible Typography: Font Sizing, Line Spacing & 400% Zoom Reflow

Typography forms over 90% of user interface content. Inflexible font sizing, cramped line heights, and fixed-pixel containers create immediate reading barriers for low-vision users and those with cognitive reading differences. Adhering to WCAG 1.4.12 (Text Spacing) and WCAG 1.4.10 (Reflow) ensures your typography remains readable across all viewports and custom user overrides.

Core WCAG Criteria Governing Typography

• WCAG 1.4.4 (Resize Text - Level AA): Text can be resized up to 200% without assistive technology and without loss of content or functionality.
• WCAG 1.4.10 (Reflow - Level AA): Content must reflow into a single vertical column at 400% browser zoom (320px equivalent width) with zero horizontal scrolling.
• WCAG 1.4.12 (Text Spacing - Level AA): Content does not clip or overlap when users inject custom text spacing stylesheets.

The Four Rules of WCAG 1.4.12 (Text Spacing)

Your layout must maintain full readability without text clipping when the following CSS styles are applied by user extensions:

Surviving 400% Browser Zoom (WCAG 1.4.10 Reflow)

To pass the 400% reflow test:

1. Never set fixed `height` values on cards, buttons, or article sections (`min-height` is acceptable).
2. Use relative units (`rem`, `ch`, `%`) rather than fixed pixels (`px`) for layout structures.
3. Avoid disabling user zoom in meta viewport tags (never use `user-scalable=no` or `maximum-scale=1.0`).

Font Selection, Character Distinction & Dyslexia Considerations

Choose typefaces (like Plus Jakarta Sans, Inter, or Atkinson Hyperlegible) with distinct character shapes that clearly differentiate between capital 'I', lowercase 'l', and the number '1'.

Production Accessible CSS Typography Scale

:root {
  --font-base: 'Plus Jakarta Sans', system-ui, sans-serif;
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
}

body {
  font-family: var(--font-base);
  font-size: var(--text-base);
  line-height: 1.65;
  letter-spacing: -0.01em;
}

p {
  margin-block-end: 1.75em;
  max-width: 70ch; /* Optimal reading length */
}