Size text containers in em units
Sizing text in a relative unit is only half the job. The box around it has to move too, or enlarged text simply runs out of room. C28 sizes containers in em, so a box that holds 20 characters at the default size still holds 20 characters when the reader doubles it. W3C lists it as sufficient for 1.4.4 Resize Text when combined with other techniques, so it works alongside the font-sizing techniques rather than instead of them. It also lists it as advisory for text spacing, which is the same idea from a different direction, because a container measured in em has room to grow when a reader's spacing override enlarges the text inside it. The declarations to look for are the opposite of this. A fixed height, a fixed width and a hidden overflow, which together make a box that quietly eats whatever no longer fits.
How we find it in an audit
Fixed dimensions with a hidden overflow are an automated inventory and the pattern is easy to spot. The check that matters is done at 200 percent text size, where we look for content cut off at an edge, cards that overlap, and buttons whose label has been trimmed to fit.
How affected users experience it
The damage is silent, which is what makes it dangerous. Text does not wrap or spill in a way anybody would notice. It is clipped by a container that keeps its shape, so a reader at 200 percent sees a card ending mid-sentence with no sign that anything continued. Nothing tells them they are missing something.
Passes vs. fails
Passes
.card { width: 18em; min-height: 7em; }Fails
.card { width: 280px; height: 120px; overflow: hidden; }How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Meta viewport allows for zoomA tool can check this
- Zoomed text node is not clipped with CSS overflowA tool finds candidates, you decide
- Important letter spacing in style attributes is wide enoughA tool can check this
- Important line height in style attributes is wide enoughA tool can check this
- Important word spacing in style attributes is wide enoughA tool can check this
Other ways to satisfy this rule
15 guides on this site are filed under 1.4.4 Resize Text. W3C lists this one as sufficient for that rule when combined with other techniques, so the condition is part of the test rather than a footnote to it.
- C12sufficientSize text in percent so it scales
- C13sufficientUse named font sizes that respect user defaults
- C14sufficientSize text in em units, not pixels
- G142sufficientBuild with technologies whose browsers support zoom
- G146sufficientUse liquid layouts that fit any window
- G178sufficientProvide working on-page text-size controls
This guide is our interpretation of W3C technique C28: Specifying the size of text containers using em units. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.