font-size-adjust
The font-size-adjust CSS property preserves apparent text size, regardless of the font used, by scaling fonts to the same size with respect to a specific metric, such as x-height. This can help make fallback fonts look the same size.
Overview
The font-size-adjust CSS property preserves apparent text size, regardless of the font used, by scaling fonts to the same size with respect to a specific metric, such as x-height. This can help make fallback fonts look the same size.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 127 | 127 | 3 | 16.4 | 127 | 16.4 | |
| CSS at-rule | ||||||
| The size-adjust CSS descriptor for the @font-face at-rule defines a multiplier for glyph outlines and metrics associated with this font. This makes it easier to harmonize the designs of various fonts when rendered at the same font size. | 92 | 92 | 92 | 17 | 92 | 17 |
| CSS property | ||||||
from-font | 127 | 127 | 118 | 17 | 127 | 17 |
none | 127 | 127 | 3 | 16.4 | 127 | 16.4 |
two-values Two-value syntax | 127 | 127 | 92 | 17 | 127 | 17 |
| Other | ||||||
| The font-size-adjust attribute allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in a substitute font. | 127 | 127 | 3 | 16.4 | 127 | 16.4 |
- Before Firefox 40, `font-size-adjust: 0` was incorrectly interpreted as `font-size-adjust: none` (bug 1144885).
- Only supported on Windows.
- This browser only partially implements this feature
- This feature was removed in a later browser version (3)
- Before Firefox 40, `font-size-adjust: 0` was incorrectly interpreted as `font-size-adjust: none` (bug 1144885).
- Only supported on Windows.
- This browser only partially implements this feature
- This feature was removed in a later browser version (3)
Syntax
body {
font-family: "Ideal Sans", Verdana, sans-serif;
font-size-adjust: 0.5;
}
/* Use a specific metric as a reference */
.adjusted {
font-size-adjust: ex-height 0.48;
}Live demo
Use cases
Reading rhythm
Use font-size-adjust to improve how text wraps, aligns, or scales in dense layouts and editorial UI.
Language-aware text
Adjust typography when script direction, spacing, or writing rules differ across languages.
Cautions
- Test with real content rather than short placeholder strings because typographic behavior changes with length and language.
- Prefer the smallest rule that solves the layout problem so text remains easy to maintain.
Accessibility
- Typography choices should preserve readability at high zoom and on narrow screens.
- Avoid stylistic settings that reduce comprehension or make scanning harder.
Related links
Powered by web-features