Use named font sizes that respect user defaults
CSS has named font sizes. small, medium, large, x-large, and the relative pair larger and smaller. W3C lists C13 as sufficient for 1.4.4 Resize Text on the relative-measurements path, and describes the values as hints the browser uses to choose a size, with the relative ones resolved against the size the element inherits. What matters for the reader is the outcome. A named size moves when the browser's text size moves. A pixel size does not. It is a coarse tool, five or six steps rather than a free scale, so most teams reach for percent or em instead and reserve names for a quick fix in copy they do not control. Coarse and scaling still beats precise and frozen.
How we find it in an audit
Named sizes are easy to inventory and the check is the same one every resize technique needs. We change the browser's default text size and reload, then look for the text that did not move. On most sites that is the fine print, the legal footer and the form hints, which is to say the text people most often need to enlarge.
How affected users experience it
Ten pixel fine print is the passage low-vision readers most need to grow, and it is the passage most often nailed down. Terms, delivery estimates, the line explaining what a checkbox commits you to. When those are set in a scaling unit, one browser setting fixes them everywhere and nobody has to zoom the page sideways to read a footnote.
Passes vs. fails
Passes
.fine-print { font-size: small; }Fails
.fine-print { font-size: 10px; }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
- C14sufficientSize text in em units, not pixels
- 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 C13: Using named 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.