Font-size-adjust property
Last updated: 2026-09-13
font-size-adjust Font-size-adjust property
The font-size-adjust CSS property keeps the x-height (the height of a lowercase x) consistent when fonts fall back, preventing a large visual size jump when different fonts mix. It is a CSS3 property.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | Yes |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
font-size-adjust: none | auto | <number>;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No adjustment |
<number> | Type | Adjustment value (keeps the x-height consistent) |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-size-adjust | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： The value is usually set to the primary font's x-height ratio (x-height / font-size) so fallback fonts keep a consistent visual size.
Warning： Browser support is limited; verify that your target browsers support it before using it in production.
❓ FAQ
QWhat problem does the font-size-adjust property solve in web design?
ADifferent fonts have different x-heights (lowercase letter heights) at the same font size, so when the preferred font fails to load and a fallback is used, the visual size changes noticeably. font-size-adjust unifies the x-height-to-font-size ratio, making the fallback font look about the same size as the preferred one.
QHow do I pick the right value for the font-size-adjust property?
AThe value is the ratio of the font's x-height to its font size — roughly 0.58 for Verdana and 0.48 for Georgia. Measure the preferred font's ratio first, fill it in, then check how the fallback renders. The newer syntax also accepts auto, letting the browser compute the value.
QWhat is the current browser support for the font-size-adjust property?
ASafari and Firefox have supported it for years; Chrome and Edge only added support starting from version 127. Older Chrome ignores the property, so fallback fonts render at inconsistent sizes. Confirm your target browsers before going live.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
