size-adjust

The size-adjust CSS descriptor 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

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

Formal syntax

<percentage>

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
size-adjust
92
92
92
89-92
No
78
No
92
92
92
No
No
16.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/size-adjust