Size text in percent so it scales
Font sizes written in percent are computed against the size the element inherits, so text that started from the browser's default keeps its relationship to whatever the reader has set that default to. W3C lists C12 as sufficient for 1.4.4 Resize Text on the path that uses relative measurements. The mechanism is inheritance and it is worth stating, because it explains why one declaration does so much work. Set a percentage on body and every element inherits that value unless a more specific rule overrides it, so the whole document scales from one place. A pixel size does not do that. It says 13 pixels regardless of what the reader asked their browser for, and on a font-size preference set for a reason, that is the site overruling the person using it.
How we find it in an audit
Pixel font sizes are an automated inventory across every stylesheet, which tells us the size of the job. Then we change the browser's default font size and reload, because that is the setting this technique serves, and watch which parts of the page move and which sit still.
How affected users experience it
This serves people with low vision who have set a font size once, in their browser, and expect sites to honor it. A page built in pixels ignores that setting completely, so the reader is left zooming every page individually, which enlarges the layout as well as the text and pushes lines off the side of the screen. Text that scales from the default just arrives at the size they asked for.
Passes vs. fails
Passes
body { font-size: 100%; }
h2 { font-size: 150%; }
small { font-size: 85%; }Fails
body { font-size: 13px; }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.
- C13sufficientUse named font sizes that respect user defaults
- 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 C12: Using percent 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.