font-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.

The font-size-adjust attribute allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in a substitute font.

Note: As a presentation attribute, font-size-adjust can be used as a CSS property. See the CSS font-size-adjust property for more information.

You can use this attribute with the following SVG elements:

Example

html
<svg
  width="600"
  height="80"
  viewBox="0 0 500 80"
  xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-family="Times, serif" font-size="10px">
    This text uses the Times font (10px), which is hard to read in small sizes.
  </text>
  <text y="40" font-family="Verdana, sans-serif" font-size="10px">
    This text uses the Verdana font (10px), which has relatively large lowercase
    letters.
  </text>
  <text
    y="60"
    font-family="Times, serif"
    font-size="10px"
    font-size-adjust="0.58">
    This is the 10px Times, but now adjusted to the same aspect ratio as the
    Verdana.
  </text>
</svg>

Usage notes

Default value none
Value none | <number>
Animatable Yes
none

Choose the size of the font based only on the font-size property.

<number>

Choose the size of the font so that its lowercase letters (as determined by the x-height of the font) are the specified number times the font-size.

The number specified should generally be the aspect ratio (ratio of x-height to font size) of the first choice font-family. This means that the first-choice font, when available, will appear the same size in browsers, whether or not they support font-size-adjust.

0 yields text of zero height (hidden text).

Specifications

Specification
CSS Fonts Module Level 4
# font-size-adjust-prop

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-size-adjust

Legend

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

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Has more compatibility info.

See also