`size-adjust` CSS at-rule descriptor

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2023.

See full compatibility

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

css

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

Related at-rule	`@font-face`
Initial value	`100%`
Percentages	as specified
Computed value	as specified

Formal syntax

size-adjust = 
  <percentage [0,∞]>

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.

css

@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`	Chrome – Full support Chrome 92 (Release date: 2021-07-20) footnote Full support	Edge – Full support Edge 92 (Release date: 2021-07-22) footnote Full support	Firefox – Full support Firefox 92 (Release date: 2021-09-07) footnote Full support	Opera – Full support Opera 78 (Release date: 2021-08-03) footnote Full support	Safari – Full support Safari 17 (Release date: 2023-09-18) footnote Full support	Chrome Android – Full support Chrome Android 92 (Release date: 2021-07-20) footnote Full support	Firefox for Android – Full support Firefox for Android 92 (Release date: 2021-09-07) footnote Full support	Opera Android – No support Opera Android footnote No support	Safari on iOS – Full support Safari on iOS 17 (Release date: 2023-09-18) footnote Full support	Samsung Internet – Full support Samsung Internet 16 (Release date: 2021-11-25) footnote Full support	WebView Android – Full support WebView Android 92 (Release date: 2021-07-20) footnote Full support	WebView on iOS – Full support WebView on iOS 17 (Release date: 2023-09-18) footnote Full support

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support

size-adjust CSS at-rule descriptor

Legend

`size-adjust` CSS at-rule descriptor