Font-size-adjust influences the apparent size of fallback glyphs using a font metric such as x-height. It does not download a font or change the declared font-size by itself.
Make this comfortable
CSS font-size-adjust: steady readable fallback text
When to use it
An operations toolbar names a custom face first and a system fallback second. If the custom file is delayed, the fallback's lowercase letters may look much smaller at the same nominal size. Set an adjustment value only after measuring the chosen font pair and inspecting both renders. The sample uses a design-specific ratio that must be reviewed against the actual font asset; it is not a universal number. Test long action labels, narrow widths, zoom, and a blocked font request. A larger fallback may wrap more text, so leave flexible space in the toolbar. Font loading strategy and the fallback stack remain separate decisions.
.operations-toolbar { font-family: 'Ledger Sans', system-ui, sans-serif; font-size: 1rem; font-size-adjust: 0.55; }Cost and verification
The property has little ongoing runtime cost; the cost is choosing and validating an appropriate metric. A guessed value can make fallback text too large and increase layout movement rather than reducing it. Record the target font, fallback font, and measurement conditions in the design system. The browser may use different fallback fonts across platforms, so test common environments. Do not use font-size-adjust to force a branded face to load faster. Keep the interface readable when that face never loads, including buttons with two-line labels.
Common Mistakes
- Do not copy a font-size-adjust ratio without measuring the font pair.
- Do not use it as a font-loading policy.
- Do not fix toolbar heights before testing larger fallback glyphs.
Connected lessons
css
reference
web