`size-adjust` CSS at-rule descriptor

Baseline Newly available

This feature works across the latest devices and browser versions. This feature might not work in older devices or browser versions. It's been available across browsers since July 2024.

The size-adjust CSS descriptor for the @font-face at-rule defines a multiplier for glyph outlines and metrics associated with this font. This makes it easier to harmonize the designs of various fonts when rendered at the same font size.

The size-adjust descriptor behaves in a similar fashion to the font-size-adjust property. It calculates an adjustment per font by matching ex heights.

Syntax

size-adjust: 90%;

Values

<percentage>: A <percentage> value with an initial value of 100%.

All metrics associated with this font are scaled by the given percentage. This includes glyph advances, baseline tables, and overrides provided by @font-face descriptors.

Formal definition

Formal syntax

Examples

Overriding metrics of a fallback font

The size-adjust property can help when overriding the metrics of a fallback font to better match those of a primary web font.

@font-face {
  font-family: "web-font";
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: "local-font";
  src: local("Local Font");
  size-adjust: 90%;
}

Specifications

Specification
CSS Fonts Module Level 5 # size-adjust-desc

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`size-adjust`	92	92	92	78	17	92	92	No	17	16.0	92	17