Use CSS font-size-adjust to keep one font metric—usually the lowercase-letter height—at a chosen proportion of the declared font-size when a fallback font renders. Set a target ratio that suits your preferred font, then compare the preferred and fallback faces at the sizes and weights your site uses. The property can reduce a noticeable size mismatch, but it does not make different typefaces look identical.
What font-size-adjust does
font-size-adjust adjusts a rendered font so a selected metric is a specified proportion of the declared font-size. Because fonts have different proportions, a fallback can otherwise look substantially smaller or larger than the preferred face at the same CSS size. The browser uses the metric ratio in each font to calculate the adjusted size.
The property is inherited and applies to each font used to render the text, including the preferred font if it loads. Choose a target appropriate to that face; the value is not a fallback-only instruction.
Basic syntax and a practical starting point
.article-copy {
font-family: "Preferred Sans", Arial, sans-serif;
font-size: 1rem;
font-size-adjust: 0.52;
}The value 0.52 is illustrative, not a universal recommendation. It is a target ratio, not pixels or a percentage. Use a value measured or documented for the preferred font, then test the preferred and fallback faces at relevant sizes and weights.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
A bare number uses the ex-height metric. You can also write the metric explicitly, or use from-font:
font-size-adjust: ex-height 0.52;
font-size-adjust: from-font;The accepted metric names are ex-height, cap-height, ch-width, ic-width, and ic-height. If you omit the metric, it defaults to ex-height. For the syntax and current examples, see MDN’s font-size-adjust reference, last modified September 16, 2026.
Choose the metric that matters for your text
ex-height: Targets lowercase-letter height. It is the default and a reasonable starting point for body text where lowercase readability is the main concern.cap-height: Targets uppercase-letter height. Consider it when capital height matters most, such as in uppercase-heavy text.ch-width: Targets the width of the numeral “0,” useful for text where that width is the measure to normalize.ic-widthandic-height: Target the width and height of the CJK ideograph “水.” These are chiefly relevant when working with CJK fonts and their wide-pitch glyph measures.
Each choice normalizes only one metric. Line wrapping, glyph shapes, spacing, and other visual characteristics can still differ between fonts. Keep a suitable font stack and adjust font-size, line-height, or spacing where needed; this property is not a general replacement for those choices.
How the browser calculates the adjusted size
The calculation is u = (m / m′) s: m is the target ratio, m′ is the chosen metric ratio in the current font, s is the declared font-size, and u is the adjusted size.
For example, MDN illustrates a 12px preferred size with a target cap-height ratio of 0.20 and a fallback ratio of 0.15. The fallback becomes 16px: (0.20 / 0.15) × 12. That keeps the selected cap-height proportion aligned; it does not preserve identical glyph shapes or line breaks.
MDN’s worked examples give Verdana and Times x-height aspect ratios of 0.545 and 0.447, respectively, and cap-height ratios of 0.73 and 0.66. These are example values, not guaranteed measurements for every installed font file or version.
Rank #4
Use a fixed ratio or from-font
A fixed ratio gives you a specific target to apply as the browser renders each face. from-font uses metric information from the font instead. The right choice depends on whether you need a target matched to a particular preferred face or want the font’s own metric information to determine the adjustment. In either case, inspect the actual preferred and fallback fonts, since the property does not equalize every feature.
Compatibility and progressive enhancement
MDN labels font-size-adjust Baseline 2024 and says it has been broadly supported across the latest devices and browser versions since July 2024. Older browsers may not support it, and not every newer syntax is necessarily implemented everywhere. Check the compatibility information for the browser versions your project targets.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchKeep the font stack readable without the adjustment. If you have a distinct enhanced treatment for supporting browsers, gate it with a feature query:
@supports (font-size-adjust: 0.5) {
.article-copy {
font-size-adjust: 0.52;
}
}The feature query does not replace testing: compare the page with and without the property, using the target browsers, font faces, and weights.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Common mistakes and troubleshooting
- The preferred font looks unexpectedly larger or smaller: The value applies to that font too. Check that the target ratio matches the preferred face’s relevant metric.
- The fallback looks better in size but the layout still wraps differently: Only the selected metric is normalized. Differences in glyph widths, spacing, and shapes can still affect wrapping.
- The declaration has no visible effect: Confirm that the browser supports the syntax you used and that the selected metric differs enough between the fonts to be noticeable. Compare rendering with the property disabled.
- A
from-fontor metric form fails in an older target browser: Not every browser implements every newer syntax. Verify support for the project’s browser range and retain the basic font stack as the fallback. - The ratio is negative or the text disappears: Negative values are invalid; zero is allowed but produces text of zero height. Use a nonnegative, meaningful target.
- Combining with
@font-facesize-adjustproduces an unexpected result: MDN notes that an overridden metric is used in thefont-size-adjustcalculation. Check the interaction between the descriptors rather than assuming the original metric is still used.
Or skip the browser setup
If you need a screenshot to compare typography in a rendered page, you can request one with ScreenshotNeo. It is a website screenshot API and MCP server; one GET request can return a PNG, JPEG, WebP, or PDF. The service accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status in headers.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for the free plan.
Frequently Asked Questions
Can I use a percentage for font-size-adjust?
No. Its numeric value is a unitless target ratio, not a percentage or a length.
Does font-size-adjust make fallback text identical to the preferred font?
No. It adjusts one selected metric; glyph shapes, spacing, and line wrapping can still differ.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
