![Rachel Andrew](https://web.dev/images/authors/rachelandrew.jpg) Rachel Andrew Technical Writer [GitHub](https://github.com/rachelandrew) [LinkedIn](https://www.linkedin.com/in/rachelandrew) [Mastodon](https://front-end.social/@rachelandrew) [Bluesky](https://bsky.app/profile/rachelandrew.bsky.social) [Homepage](https://rachelandrew.co.uk)

<br />


Published: July 23, 2024

<br />

> [!TIP]
> **Celebration:** This web feature is now available in all three major browser engines, and becomes **Baseline Newly available** as of July 23, 2024.

<iframe src="https:///frame/blog/font-size-adjust/index_e65c6add1f2cced6974df079d47289cbf4b221205576162361dd918f3a6a02e7.frame" class="framebox inherit-locale " allow="clipboard-write https://" allowfullscreen is-upgraded></iframe>

The CSS [`font-size-adjust`](https://developer.mozilla.org/docs/Web/CSS/font-size-adjust) property lands in Chrome today,
and becomes part of Baseline Newly available. This property can help prevent
shifting of your layout when fallback fonts are loaded, and ensure
legibility of fallback fonts at smaller font sizes. The `font-size-adjust`
property is part of
[Interop 2024](https://wpt.fyi/interop-2024),
so this is another win for the effort to improve the interoperability of the
web platform.

## The problem

When you compare two fonts set to the same size, depending on the shape and size
of the glyphs, the displayed text can take up a very different amount of space.
As an example, the following demo shows text in Verdana and Arial,
both set to 16 pixels.
<iframe height="300" style="width: 100%;" scrolling="no" title="Before: font-size-adjust" src="https://codepen.io/web-dot-dev/embed/PorNZaE?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/web-dot-dev/pen/PorNZaE">
Before: font-size-adjust</a> by web.dev (<a href="https://codepen.io/web-dot-dev">@web-dot-dev</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe> Text displayed at 16px in Verdana and Arial.

The difference in size is accounted for by the fact that the *aspect value*,
the height of lowercase letters when compared to uppercase letters in a font,
varies between fonts.

This can cause two problems when a font with a different aspect value is used
as a fallback. Firstly the amount of space taken up by the font will change.
Secondly, your choice of fallback font may be less legible then the one
first specified, particularly at small font sizes. This is because the
relative height of lowercase letters to uppercase ones is a key factor in
legibility.

## How `font-size-adjust` helps

The `font-size-adjust` property lets you adjust your fallback font to better
match the first font. The following example shows the two fonts shown
previously, this time the second font has been adjusted to match the first.
<iframe height="300" style="width: 100%;" scrolling="no" title="After: font-size-adjust" src="https://codepen.io/web-dot-dev/embed/wvLGMXj?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/web-dot-dev/pen/wvLGMXj">
After: font-size-adjust</a> by web.dev (<a href="https://codepen.io/web-dot-dev">@web-dot-dev</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe> Using `font-size-adjust`.

This example uses a single value, a number, which adjusts the fonts using the
default font metric of `ex-height`. This is the ratio of the x-height, the
height of a lowercase x in the font to font size. You can also specify the font
metric used. In the next example, I have normalized the fonts using the
`ch-width` keyword, in addition to the number.
<iframe height="300" style="width: 100%;" scrolling="no" title="After: font-size-adjust" src="https://codepen.io/web-dot-dev/embed/KKjzVrJ?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/web-dot-dev/pen/KKjzVrJ">
After: font-size-adjust</a> by web.dev (<a href="https://codepen.io/web-dot-dev">@web-dot-dev</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe> Using `font-size-adjust` with the ch-width font metric.

To see all possible values see the
[MDN documentation for `font-size-adjust`](https://developer.mozilla.org/docs/Web/CSS/font-size-adjust).

It's worth looking at your site using your fallback font and seeing if a little
tweak with `font-size-adjust` can help readers who are using the fallback font
have a better experience, especially now it's available everywhere!