The size-adjust descriptor in @font-face allows scaling of glyph sizes for a particular font face without affecting the CSS font-size and derived metrics such as em. CSS font-size can be seen as a scale factor for a box that the font draws in. Glyph sizes within that box vary between fonts, and size-adjust enables harmonising them across different fonts. That's why it can also help with reducing cumulative layout shift by matching up the fallback font and primary web font using this descriptor.

Motivation

Harmonize perceived size across fonts that take up a different size within their em box. Reduce CLS by matching size and average width of laid out text between primary web font and system fallback font.

Specification

Editor's draft

Status in Chromium

Blink>Fonts


In developer trial (Behind a flag) (tracking bug) in:

  • Chrome for desktop release 92
  • Chrome for Android release 92
  • Android WebView release 92

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owners

Comments

CSS WG name bikeshedding was resolved, compare https://github.com/w3c/csswg-drafts/issues/6114

Last updated on 2021-05-13