To match a fallback font’s apparent size to a webfont, normalize their x-heights with CSS font-size-adjust, or scale a specific fallback face with size-adjust. This guide walks through choosing, calculating and testing the adjustment in a Mac desktop browser.

Choose the metric that matches your text

For ordinary English body text, start with x-height: the height of lowercase letters relative to the font size. Two fonts set to 16px can have different x-heights, so equal CSS sizes do not necessarily look equal. MDN documents font-size-adjust specifically for normalizing a chosen font metric across the fonts used to render text. MDN: font-size-adjust

Choose the metric before changing values. Lowercase-heavy paragraphs usually suggest ex-height; uppercase labels may call for cap-height. The ch-width option normalizes the advance width of the zero character, which answers a different question from matching lowercase height. None of these options promises equal widths for every word. MDN: font-size-adjust values

For this task, use a synthetic page containing a heading such as Sample collection, a label such as Tile 024, and a paragraph such as Amber tiles sit beside a blue circle. Each tile has a short label. The goal is to make the fallback’s lowercase text look similarly sized while checking that these elements still fit.

Your immediate task Start with What to check separately
Normalize lowercase size across a font stack font-size-adjust with a target x-height ratio Wrapping and line spacing
Tune one known fallback face A fallback alias with size-adjust Availability of that exact local face
Reduce differences in vertical layout Font metric overrides after size matching Baselines and paragraph height

The first two mechanisms have different scopes: font-size-adjust is applied to text, whereas size-adjust belongs inside an @font-face rule and scales that face’s outlines and metrics. MDN: font-size-adjust, MDN: size-adjust

Establish a reliable comparison on your Mac

Use a preview page whose stylesheet you can edit. The examples below call the existing webfont Sample Web; substitute its actual CSS family name. They are integration fragments, assuming the webfont is already declared and the sample elements exist.

In Chrome on your Mac, right-click the sample paragraph and choose Inspect. Alternatively, press Command + Option + C and select it. Chrome opens the Elements panel, where Styles shows the applied CSS. Chrome: Open Chrome DevTools

Open Computed, scroll to Rendered Fonts, and confirm which font actually draws the sample. A declared family list alone does not establish that the preferred font is rendering. Chrome’s documentation demonstrates using this section to distinguish local and network font resources. Chrome: Apply other effects

Keep the viewport, zoom, font weight, font style, letter spacing and container width fixed during the comparison. First inspect the webfont state. Then temporarily change the paragraph’s font-family to your intended fallback, such as Arial, sans-serif, and inspect the rendered font again.

Use Styles to edit declarations and their checkboxes to toggle adjustments. This makes it possible to compare the same paragraph without changing its wording or layout. Chrome: CSS features reference

When taking measurements through JavaScript, wait for the relevant font load rather than using an arbitrary delay. document.fonts.load() can request a specified face; document.fonts.ready resolves after the document’s font loading and associated layout operations finish. Neither replaces checking the actual rendered font. MDN: FontFaceSet.load(), MDN: FontFaceSet.ready

Calculate and apply the target x-height ratio

The target for numeric font-size-adjust is a ratio, not an enlargement percentage. Divide the webfont’s x-height by its units per em when those metrics are available for the exact face. The browser then adjusts each selected font to that target proportion of the declared font size. W3C: CSS Fonts Module Level 5

Consider these explicitly illustrative inputs, which are not measurements of any named font:

Metric Target webfont Fallback
Units per em 1,000 1,000
X-height in font units 520 470
X-height ratio 0.52 0.47

At a declared size of 16px, the target x-height is 16 × 0.52 = 8.32px. To reach that height, the fallback needs a scale factor of 0.52 ÷ 0.47, approximately 1.106383. Its adjusted rendering size is about 17.7021px. These calculations illustrate the specification’s formula; they do not predict actual wrapping.

For the property-based approach, apply the target ratio to the text. This CSS fragment assumes the sample paragraph has the class sample-copy:

.sample-copy {
  font-family: "Sample Web", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: 0.52;
}

Here, 0.52 belongs to the illustrative webfont. Replace it with your target face’s ratio. Supplying an inaccurate value also changes the preferred font’s rendered size; the property applies to every selected font, including the webfont. W3C: CSS Fonts Module Level 5

If you lack a trustworthy ratio, the W3C documents a visual calibration method: compare two samples of the same font, size and content, with adjustment disabled on one and a trial numeric adjustment on the other. Start at 0.5 and refine until they match. Use enlarged isolated samples for calibration, then return to normal reading size to judge the result. Treat a visually derived value as an approximation. W3C: CSS Fonts Module Level 5

The keyword from-font takes its target from the first available font. If the intended webfont is unavailable, that can mean another font supplies the target. For a fallback that must match a known webfont even when it never loads, use an established numeric ratio. MDN: font-size-adjust values

Use a fallback alias when you need control over one face

Choose size-adjust when you want the scaling attached to a particular fallback face. For the illustrative pair above, convert the scale factor to a percentage: 100 × 0.52 ÷ 0.47 = 110.6383%. The descriptor scales glyph advances as well as outlines and other associated metrics. MDN: size-adjust

This alternative integration fragment assumes Arial Regular is locally available and the target webfont is already declared. The percentage is illustrative, so measure your actual pair before adopting it:

@font-face {
  font-family: "Sample Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  font-style: normal;
  size-adjust: 110.6383%;
}

.sample-copy {
  font-family: "Sample Web", "Sample Fallback", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: none;
}

The synthetic alias keeps the adjustment specific to this stack. Its local() sources identify a particular font face; they do not select an arbitrary system sans-serif. The CSS Fonts specification recommends supplying full and PostScript names for matching across platforms. If neither source is available, the browser proceeds through the remaining family list. W3C: CSS Fonts Module Level 4

Use this as an alternative to the previous method. Applying font-size-adjust to text that uses a size-adjusted face can normalize away the intended scaling, because the property uses the already overridden metric. MDN: font-size-adjust description

Diagnose wrapping and baseline differences separately

After matching lowercase height, compare the heading, label and paragraph at their intended widths. A useful sequence is to check apparent size first, line endings second, and total block height third. This separates three visible problems that might otherwise lead you to keep changing one percentage.

If lowercase size looks right but the paragraph wraps differently, compare another fallback before refining the scale further. Scaling to one height metric does not make different glyph designs share every advance width. Record the last word on each line in the webfont and fallback states to make the remaining difference concrete.

If the baseline or block height still differs, investigate ascent-override, descent-override and line-gap-override. These control layout metrics rather than providing another visual size target. For example, ascent is the metric above the baseline used in laying out line boxes. Derive overrides from the actual font pair instead of copying unrelated percentages. MDN: ascent-override

For a generated starting point, Capsize’s documented createFontStack accepts metrics in preferred-family order and returns both fontFamily and fallback fontFaces. Use both outputs together. Its documentation also provides @capsizecss/metrics for included fonts and @capsizecss/unpack for extracting metrics from a custom file. Generated declarations still need testing with your sample layout. Capsize documentation

Keep browser layout and text shaping intact

Canvas measurements can help compare strings, but they answer narrower questions. WHATWG defines measureText().width as advance width, while actual bounding-box measurements describe the drawn text. Canvas prepares a hypothetical infinitely wide line, so its width is not a measurement of a wrapped DOM paragraph. WHATWG: HTML Standard, Canvas

Keep whole words and sentences together in your test. Avoid rebuilding text as individually positioned characters or assuming summed character widths reproduce a shaped string. CSS defines conditions governing shaping across inline boundaries, including boundaries with spacing or alignment changes. Preserve the component’s normal structure when validating its font fallback. W3C: CSS Text Module Level 3

Check browser support and finish the comparison

MDN lists basic font-size-adjust as Baseline 2024 and size-adjust as broadly available since September 2023. That does not establish support for every newer metric or keyword in an older browser. Consult the compatibility tables for the syntax you actually use. MDN: font-size-adjust, MDN: size-adjust

Where an advanced metric form is unavailable, use supported numeric x-height normalization when it suits the task, or a supported fallback-specific descriptor. If the required adjustment is unsupported altogether, retain a visually close fallback and verify the unadjusted layout in that browser.

Finish by repeating the comparison for every weight and style you use, then in the Mac browsers you intend to support. Confirm the rendered face each time. Keep the chosen adjustment only when the synthetic heading, label and paragraph have acceptable apparent size, wrapping and spacing in both webfont and fallback states.

Sources