What font-size-adjust does
font-size-adjust is a CSS Fonts Module Level 4 property that normalizes the visual size of fallback fonts so that they appear at the same x-height as your primary font. Two fonts can have the same font-size value in CSS but render at noticeably different sizes because their internal metrics differ. font-size-adjust closes that gap by scaling the fallback to match a target aspect.
The most common syntax is font-size-adjust: ex-height 0.53, which says: render this fallback so its x-height is 0.53 times the font-size. If your primary font has an ex aspect of 0.53 and your fallback has 0.46, the fallback would otherwise look smaller. The CSS engine scales the fallback up to match. The visible result is a swap where the body text holds its line length and vertical rhythm.
Why this matters for CLS
When a web font finishes loading and replaces the fallback, the browser reflows the entire block of text. Different fonts at the same font-size yield different cap heights, x-heights, and line widths. Words shift. Lines reflow. Content below jumps down. Google Core Web Vitals counts this as cumulative layout shift, and pages with high CLS rank lower.
font-size-adjust fixes the visible portion. Combined with size-adjust, ascent-override, and descent-override on the fallback @font-face, you can produce a swap that is invisible to the user. The Adjuster here gives you the ex-height ratio of common web fonts and the closest match across the system stack so you can plug the right number into your CSS.
Common Use Cases
E-commerce sites where layout shift translates directly to abandoned carts use the Adjuster to nail their web font swap. Documentation sites with long-form reading benefit because the swap no longer reflows the entire scroll position. App shells where the UI font is critical to feel use it to keep the system fallback visually consistent.
Designers spec-ing a new brand font use it to verify their fallback choice before any code ships. If the ex-height ratios are too far apart, the design tells them to pick a different fallback rather than fighting it later.
How We Compare
The Mozilla Developer Network docs explain font-size-adjust well but do not give you the actual ratio numbers for common fonts. The Capsize project measures metrics but produces line-height overrides, which is a related but different technique. The Adjuster here is focused: pick your web font, pick a fallback, get the ratio.
Compared to writing a one-off script that loads each font and measures its bounding box, the precomputed values here cover the 60 most common web and system fonts and are accurate to four decimal places. For unlisted fonts, the manual upload mode parses the font OS/2 table directly to compute sx-height.
Frequently Asked Questions
Which browsers support font-size-adjust?
Firefox has shipped it since 2003. Chrome and Edge enabled it without a flag in version 127 (July 2024). Safari shipped it in 17 (September 2023). As of 2026 it is available to over 95 percent of global users. For older browsers, the property is silently ignored and the page falls back to the unadjusted behavior, which is the same as not declaring it. Safe to ship today.
What is the ex-height aspect ratio?
The ex-height aspect ratio is the height of a lowercase x divided by the font-size, in the same units. A font with a tall x-height like Inter has an aspect around 0.53, while a font with a short x-height like Garamond has around 0.42. The aspect is what determines how big a font looks at a given font-size, more than the cap height does, because most of what you read is lowercase.
Should I use ex-height or cap-height as the metric?
ex-height for body text, cap-height for headlines. Reading is dominated by lowercase glyphs, so matching ex-height keeps text visually consistent in long-form content. Headlines and display sizes are dominated by capital letters, so cap-height matching is more accurate there. The Adjuster lets you pick either and shows both side by side.
What is the difference between font-size-adjust and size-adjust?
font-size-adjust is a CSS property applied to any element to scale the rendered size of its computed font. size-adjust is a descriptor used inside an @font-face block to permanently scale a font when it is registered. font-size-adjust is what you reach for when you want to keep the fallback in step with the primary; size-adjust is what you reach for when you want to make two fonts match before either is even chosen.
How do variable font instances affect the ex-height ratio?
Variable fonts have a single ex-height per instance, set by the active values of registered axes like weight and width. The Adjuster reads the font OS/2 sxHeight value, which represents the regular instance. If you ship a heavier weight by default, recompute the ratio at that weight because the bolder cut may have a different x-height.
How accurate are the precomputed values?
Four decimal places, sourced directly from the font OS/2 table sxHeight field divided by the unitsPerEm. Any rounding error is below the threshold where it would matter for layout. If you need higher precision, the upload mode lets you parse your specific font file and get the value with full floating point precision.
Will this fix font-display swap layout shift completely?
It eliminates the visual size mismatch, which is the primary contributor. There may be tiny residual shifts from glyph-level width differences (kerning, advance widths) that are smaller than 1 pixel per word. For most pages this is below the CLS threshold that Core Web Vitals scores against. For perfect zero-shift, combine font-size-adjust with ascent-override and descent-override in the @font-face block.
Is there a performance cost to using font-size-adjust?
Negligible. The CSS engine reads the OS/2 sxHeight value once when the font is registered, computes the scale factor, and applies it during layout. There is no per-frame cost. The only real cost is the time you spend choosing the right value, which the Adjuster reduces from hours to seconds.