CSS font-size-adjust reaches Baseline

With Chrome shipping support today, the CSS font-size-adjust property is now part of Baseline Newly available. The property is also on the Interop 2024 list, marking another step forward for cross-browser consistency on the web platform.

Rachel Andrew

Why font metrics cause layout shifts

Not all fonts render at the same visual size, even when set to the same pixel value. Glyph shapes and proportions differ between typefaces. For example, text set to 16 pixels in Verdana takes up noticeably more space than the same text in Arial.

Text displayed at 16px in Verdana and Arial.

This discrepancy comes from the aspect value of a font — the ratio of lowercase letter height to uppercase letter height. When a fallback font with a different aspect value replaces a primary web font, two problems can surface. First, the space consumed by the text changes, which can shift your layout. Second, fallback fonts with a lower relative lowercase height tend to be harder to read, particularly at smaller sizes.

Matching fallback fonts to your primary typeface

The font-size-adjust property lets you compensate for those metric differences. In the following example, the second font has been adjusted to better match the first, reducing the visual gap between them.

Using font-size-adjust.

The simplest usage takes a single numeric value that normalizes fonts using the default ex-height metric — the ratio of the font's x-height to its font size. You can also choose a different metric explicitly. The example below uses the ch-width keyword alongside a numeric value to normalize the fonts based on character width rather than x-height.

Using font-size-adjust with the ch-width font metric.

For the full list of supported values and syntax, refer to the MDN documentation for font-size-adjust.

If your site relies on fallback fonts, it's worth testing with those fonts active and checking whether a small adjustment with font-size-adjust improves legibility and layout stability. With the property now available across browsers, it's a practical tool for polishing the experience for readers on fallback typefaces.