Size text in em units, not pixels
An em is a property of the font, so a size written in em moves whenever the font moves. That single sentence is why W3C lists C14 as sufficient for 1.4.4 Resize Text on the relative-measurements path. The catch is nesting. Because em resolves against the parent's computed size, an 0.9em inside an 0.9em inside an 0.9em compounds down to something nobody chose, which is how a deeply nested caption ends up at nine pixels. rem sidesteps that by resolving against the root every time, and it is what most modern stylesheets use, though it is worth knowing that rem is not part of what this technique documents. Whichever you pick, the rule is the same. Do not write a fixed pixel size on text and then ask the reader to zoom the whole page instead.
How we find it in an audit
Pixel sizes are an automated inventory. Compounding is not, so we look at the deep parts of the page, table cells inside cards inside sidebars, and read the computed size rather than the declared one. Then we change the browser default and check what moved.
How affected users experience it
The reader who set their browser to 24 pixel text did it for a reason, and a stylesheet in pixels overrules that decision on every page it controls. Sized in em or rem, the same page arrives at the size they chose, with the layout intact and no horizontal scrolling to reach the end of a line.
Passes vs. fails
Passes
html { font-size: 100%; }
p { font-size: 0.875rem; }
h2 { font-size: 1.5rem; }Fails
p { font-size: 14px; }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
- HTML images contain no textNothing implements this yet
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 used for techniques for relative measurements, 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
- C28sufficientSize text containers in em units
- 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 C14: Using em units for font sizes. 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.