IconVault logoIconVault
Sign in

CSS font-size-adjust - Interactive CSS Lab | IconVault

Normalize x-height across font fallbacks with font-size-adjust. Live visual matcher with x-height bars and copyable CSS. Free, in your browser.

All tools

CSS font-size-adjust

Keep x-height consistent when fonts swap

5 of 5 free uses left

Primary font (A)

Fallback font (B)

Font size28px
font-size-adjust on B0.481

Slide the adjust value until the teal x-height bars line up: that is the value that keeps your fallback text the same readable size when the primary font fails to load.

A: primary fontx-height ~13.5px

Pack my box with five dozen liquor jugs. 0123456789

x

B: fallback fontx-height ~13.5px (adjust 0.481)

Pack my box with five dozen liquor jugs. 0123456789

x

Matched. The fallback keeps the same x-height, so text will not shrink or jump when fonts swap.

Copy the CSS

/* Primary font with a webfont that may fail to load */
.headline {
  font-family: Georgia, Arial, sans-serif;
  font-size: 28px;
  font-size-adjust: 0.481;   /* x-height forced to 13px, matching Georgia */
}

/* Newer keyword forms (Chrome 127+, Firefox) */
.headline {
  font-size-adjust: from-font;   /* use the primary font's own x-height */
}

5 of 5 free copies left. Ratios shown are approximate and vary by platform.

About this tool

IconVault's CSS font-size-adjust lab shows why text seems to shrink when a webfont fails and a fallback takes over. Pick a primary font and a fallback, slide the font-size-adjust value, and watch the teal x-height bars line up: when they match, the fallback renders at the same readable size as the original. The one-click Match button computes the right value from real font metrics. It is free and runs fully in your browser.

Different fonts have different x-heights at the same font size, so a fallback like Arial can look noticeably smaller than the Georgia it replaced, shifting your layout and hurting CLS. Setting font-size-adjust tells the browser to scale the fallback so its x-height equals a fixed fraction of the font size, keeping text legible and layouts stable. The lab explains numeric values and the newer from-font keyword, shows the generated CSS for your exact pairing, and notes that the built-in ratios are approximate and vary by platform.

Frequently asked questions

Popular searches

css font-size-adjustfont-size-adjust cssx-height cssfont fallback csscss font fallback sizefont-size-adjust examplefont-size-adjust from-fontcss x-height normalizationwebfont fallback shiftfont swap layout shiftcss font metricsx-height ratio fontsgeorgia x-heightarial x-heightverdana x-heighttimes new roman x-heightfont-size-adjust tutoriallearn font-size-adjustfont-size-adjust playgroundinteractive font-size-adjustcss font-size-adjust generatorfont-size-adjust valuehow to use font-size-adjustfont-size-adjust mdncss font-size-adjust 2026font-size-adjust browser supportfont-size-adjust safarifallback font looks smallerwebfont failed fallback too smallcss keep text size font swapfont-display fallback sizecls font swap fixreduce cls webfontscss font-size-adjust copy pastex-height barmeasure x-height cssfont-size-adjust calculatorfont pairing x-heightmatching fallback fontscss font stack best practicesystem font stack cssfont-size-adjust ex-heightfont-size-adjust cap-heightcss font size adjust not workingfont-size-adjust numbertypography css toolsreadable text cssfont legibility cssfont-size-adjust 0.5css font adjustx-height matching fonts

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →