size-adjust

Baseline 2024

Newly available

Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

We'd love to hear more about your role and the company you work for

Please help us by answering a few questions.

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