Metric Matched Fallback

Metric matched fallback is the CSS precision work that stops your layout from jumping when a variable font loads. You add one extra @font-face block that points at a local system font such as Arial for sans or Georgia for serif. Then you feed it four calculated percentages: size-adjust scales the whole font, ascent-override sets the distance above the baseline, descent-override sets the distance below, and line-gap-override controls the space between lines. These numbers come from comparing the real variable font metrics to the system font metrics so the fallback occupies the identical bounding box. The browser paints text with the fallback immediately, then swaps to the variable font the instant it arrives. No reflow. No CLS hit. This matters more for variable fonts than static ones because the single file is larger and takes longer to download, widening the window where shift can occur.

It is not a generic system-ui font stack. It is not the old trick of listing Arial, Helvetica, and sans-serif in your font-family declaration and hoping the metrics are close. It is not self-hosting a static cut of your font as the fallback because that adds another network request and defeats the byte savings you fought for. It is not eyeballing values in dev tools until the jump looks smaller on your MacBook. Those numbers break on Windows machines with different ClearType hinting and on Android where Roboto measures differently. It is not optional theater for design systems that already ship perfect variable fonts. Teams that skip this step watch their Core Web Vitals bleed out on real 3G connections while their marketing site looks rock solid in Figma.

Vercel ships Geist variable with next/font which uses Fontaine under the hood to generate exact fallback values. Their hero headlines render first in a tuned Arial at size-adjust 104.8 percent, ascent-override 91.2 percent. When Geist arrives the text swaps with zero movement and their Lighthouse CLS sits at 0.00 even on Slow 3G. Linear did the same for Inter variable across their dense product UI. The sidebar items and command menu never jump because the fallback metrics were calculated against the exact weight and optical size axes they use at 14px. Stripe Press tuned their custom display variable font against Georgia for longform essays. One 2023 article on monetary policy stayed perfectly stable on first paint even though the variable file weighed 187KB before subsetting. The New York Times applies this to their custom variable serif on feature stories so readers can begin scrolling before the font arrives without the body text reflowing mid-paragraph. GitHub uses it for Mona Sans on repository pages where the grid of issue cards would otherwise shift when the weight axis kicks in on hover. Figma matches Inter Display this way so switching between UI text at 12px and canvas headings at 48px never resizes containing panels. In every case the teams measured once, generated the overrides, and removed layout shift as a class of bug forever.

The process is mechanical. Fontaine reads your WOFF2, extracts the OS/2 table values, compares them to common system fonts, and outputs the exact @font-face CSS. If you are not on Next.js you run fontaine yourfont.woff2 --output fallback.css and copy the result. For manual control you pull ascent, descent, and unitsPerEm from both fonts then run the ratios. A typical Inter variable against Arial lands at size-adjust 107.4 percent, ascent-override 90 percent, descent-override 22 percent. Test by throttling to Slow 3G, forcing cache disable, and watching the Performance panel for layout shift regions. Any shift above 0.01 fails the checklist. Update the values when you change the variable font version because a new build can alter the metrics by two or three percent.

Use metric matched fallbacks on every production site shipping variable fonts larger than 60KB. Use them when you preload the Latin subset and expect the font to arrive after first paint. Use them on editorial sites, documentation, dashboards, and marketing pages where CLS directly affects conversion. Skip them during early prototyping when you are still picking typefaces. Skip them if you only ship two static weights under 50KB total because the added complexity buys nothing. Skip them if you use font-display block and have already accepted blank text. Never use them with third-party font hosts that block you from declaring custom fallbacks.

Metric matched fallbacks turn the variable font swap from a layout bomb into a silent handoff.