Worried your text will break when readers adjust spacing? Good web typography keeps containers flexible and units relative, so content survives line height of at least 1.5 times the font size without clipping.
This guide builds on web design basics, so start there if layout terms are new to you.
| Item | Value |
|---|---|
| Criterion | WCAG SC 1.4.12 Text Spacing, Level AA (versions 2.1/2.2) |
| Line spacing | At least 1.5 times the font size |
| Space after paragraphs | At least double the font size (2 times) |
| Letter spacing (tracking) | At least 0.12 times the font size |
| Word spacing | At least 0.16 times the font size |
| Headroom for fixed-width containers | An additional 20% of the container’s width |
These figures come from the tabnav Academy page on SC 1.4.12. Guidance can change, so check the source before you rely on the numbers.
What web typography covers on a real page
Web typography is more than picking a typeface. It also covers how text spacing behaves when a reader’s browser, device or settings change the layout. This guide concentrates on spacing, because that is where readability and accessibility meet.
The rule that anchors it is Success Criterion 1.4.12 Text Spacing. According to the tabnav Academy page, it sits at Level AA for versions 2.1/2.2 and requires that content can be presented without loss of functionality or content when users adjust text spacing.
In plain terms, your design has to bend instead of break. For the wider picture, read the web accessibility guidelines alongside this one.
The same page lists who gains from flexible spacing:
- Low vision users can adjust spacing to improve readability.
- Users with cognitive disabilities get flexibility in how text is presented.
- Everyone keeps working functionality and legible text after spacing changes.
Line height and paragraph spacing
Line spacing is the room between lines of text. The source asks you to maintain a line spacing of at least 1.5 times the font size. Tight lines make it harder for the eye to find the start of the next line, so generous spacing helps most readers, not only those with a disability.
Space after paragraphs matters just as much. The source sets the bar at paragraph spacing of at least double the font size. That is a lot of white space, and it means your pages get longer when a reader applies it.
The example on the tabnav page puts both values into one rule: .card p { line-height: 1.5; margin-bottom: 2em; letter-spacing: 0.12em; word-spacing: 0.16em; }. Treat it as a stress test for your own components. If a card, banner or table cell still works with those values, it is in good shape.
A few habits make this easier:
- Express line height and margins in relative units, not fixed pixel values.
- Let blocks of text grow vertically instead of locking their height.
- Check long paragraphs, captions and button labels, since they break first.
Letter spacing and word spacing
Letter spacing, also called tracking, is the gap between characters. The source asks that content stay intact with letter spacing of at least 0.12 times the font size. Wider tracking makes every word longer, so lines wrap sooner and text needs more room.
Word spacing is the gap between words. The same page gives a value of at least 0.16 times the font size for word spacing. Together with tracking, this can push a short label onto a second line, which is exactly what a rigid layout cannot absorb.
Spacing also interacts with the look of the page, not only its mechanics. Contrast and hue decide how text reads against its background, so pair these rules with color theory for web design when you finalise a style.
Build containers that can grow
Most spacing failures come from the container, not the text. The tabnav page shows a card with a fixed height and width, and explains that a fixed height may leave text cut off or overlapping when users adjust text spacing properties.
The fix it shows is simple: drop the fixed height and let the paragraph expand vertically within its container. Its advice for building that flexibility reads as a short checklist:
- Use flexible containers in CSS instead of fixed ones, so the design adjusts to different screens.
- Allow text spacing without wrapping problems by using relative units on the container.
- Make sure content flows smoothly, with no text overlapping or getting cut off.
- Stick to relative units for font size, line spacing and spacing between elements, for example percentages for containers and em for fonts.
If you must apply a fixed width, the source says to leave an additional 20% of the container’s width so the text can grow. Think of it as a safety margin that costs you little and protects the reader’s experience.
How do you check your text spacing?
You do not need a special tool to catch the worst problems. The source example shows the approach: apply the spacing values to your text and look at what happens to the layout.
- Apply the line height, paragraph margin, letter spacing and word spacing values from the table above to your body text and components.
- Look for text that is cut off, hidden or overlapping other content.
- Find containers with a fixed height and replace that height with a flexible one.
- Switch fixed measurements to relative units, then repeat the check.
Run this on your most text-heavy templates first. If nothing is lost and every control still works, you are meeting the intent of the criterion: no loss of content or functionality.
Frequently asked questions
What is SC 1.4.12 Text Spacing?
Show answer
It is a Level AA success criterion in versions 2.1/2.2, according to the tabnav Academy page. It requires that content can be presented without loss of functionality or content when users adjust text spacing.
Which spacing values should I design for?
Show answer
The source lists line spacing of at least 1.5 times the font size, paragraph spacing of at least double the font size, letter spacing of at least 0.12 times the font size and word spacing of at least 0.16 times the font size.
Why are fixed heights a problem?
Show answer
A fixed height may cause text to be cut off or to overlap when users adjust text spacing, which makes it difficult to read. Letting the container grow avoids that.
Does this guide recommend specific fonts?
Show answer
No. The supplied source covers spacing and flexible containers, not typeface choice, so this guide makes no font recommendations.
