Text spacing override

The layout still works when a user increases line, paragraph, letter, and word spacing to make text easier to read.

page breaks when I increase line spacingletters overlap when I space them outtext gets cut off with custom spacingmy button text spills out when spacing goes updyslexia reading settings break the layoutword spacing breaks the layoutextra spacing makes buttons cliptext spaceing override

See it

Live demo coming soon

What it is

A text spacing override is a user's custom increase to line height, paragraph spacing, letter spacing, or word spacing. WCAG 2.2 criterion 1.4.12 requires content and controls to keep working when those values reach 1.5 times the font size for line height, 2 times for paragraph spacing, 0.12em for letters, and 0.16em for words.

Test it anywhere copy sits inside cards, buttons, navigation, form controls, or fixed-height panels. People with low vision or reading difficulties may apply their own stylesheet or browser tool, and the layout must let the text grow vertically and wrap without losing content or function.

The usual failure is a fixed height combined with overflow: hidden, which clips the second line after spacing increases. Absolute positioning can also make labels collide. Minimum heights, content-driven sizing, wrapping, and enough room around text are safer than tuning a component to one font at one spacing.

Ask AI for it

Test this page against WCAG 2.2 criterion 1.4.12 by injecting a user stylesheet that sets line-height: 1.5 !important, letter-spacing: 0.12em !important, word-spacing: 0.16em !important, and p { margin-block-end: 2em !important; }. Inject it with the Stylus browser extension or paste it into the DevTools Styles pane so it applies site-wide, not to one element. Fix every clipped, overlapping, obscured, or unusable item. Replace fixed heights on text containers with min-height or content-driven sizing, remove overflow: hidden where it clips copy, and allow labels and controls to wrap. Show the affected selectors and explain how each fix preserves content and function under the override.

You might have meant

resize text and reflowwcagfocus visible

Go deeper