Skip to content

Learn

1.4.12 Text Spacing

Nothing is lost when people set line height to 1.5, paragraph spacing to 2, letter spacing to 0.12 and word spacing to 0.16 times the font size.

Level AA

What the automated checks look for

Elements fix their text spacing so it cannot be changed

Inline spacing marked !important stops people from widening the text spacing they need.

Who it affects. People with dyslexia or low vision who set wider line, letter or word spacing can't apply it here.

How to fix it. Remove !important from inline line-height, letter-spacing and word-spacing, or move the styles to a stylesheet.

<p style="line-height: 1.5">…</p>

Elements lose text when spacing is increased

When people widen letter, word and line spacing to read comfortably, text here is cut off.

Who it affects. People with dyslexia or low vision who widen text spacing lose words at the edge of a box that can't grow.

How to fix it. Don't fix the height of boxes that hold text, and don't clip them with overflow: hidden. Use min-height and let them grow.

<style>.card { min-height: 48px; } /* not height: 48px; overflow: hidden */</style>

Read more