Text Spacing

What it asks

Users with dyslexia, low vision, or cognitive disabilities often install browser extensions or user stylesheets that loosen up cramped typography. The SC defines four specific overrides — line height 1.5 of font size, paragraph spacing 2x font size, letter spacing 0.12em, word spacing 0.16em — and requires the page to still work when they are applied. No clipped text, no overflow, no missing content.

How to meet it

• Set container heights with min-height rather than fixed height so they grow as text expands.
• Avoid fixed pixel heights on buttons, navigation items, cards, and badges — let them grow with the content.
• Test by pasting a known bookmarklet (the WCAG 1.4.12 text-spacing bookmarklet exists) that applies the four overrides simultaneously.
• Allow text to wrap naturally; don’t use white-space: nowrap on labels that can grow.
• Verify nav menus, tabs, and tab labels still fit when letter spacing expands.

Common failures

• Buttons with height: 40px that clip the label when line height grows to 1.5.
• Tab labels with white-space: nowrap that overflow their container with wider letter spacing.
• Cards with fixed heights where text becomes hidden behind a “read more” fade.
• Tooltips and badges that clip their text when paragraph spacing grows.
• Sticky headers with fixed heights that overlap the page when their nav text grows.

Why it matters

This SC catches “designed-for-one-spacing-set” layouts where the designer locked everything to a Figma-perfect line height. Real users of reading-support tools apply spacing overrides constantly. The fix is usually moving from height to min-height and removing white-space: nowrap — small, mechanical changes that pay back across the whole UI.