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.

See full compatibility

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 also has a CSS property counterpart: font-size-adjust. When both are specified, the CSS property takes priority.

You can use this attribute with the following SVG elements:

Example

html,
body,
svg {
  height: 100%;
}

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

	desktop					mobile
	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`	Chrome – Full support Chrome 127 (Release date: 2024-07-23) footnote Full support	Edge – Full support Edge 127 (Release date: 2024-07-25) footnote Full support	Firefox – Partial support Firefox 1 – 2 (Release date: 2004-11-09) footnote Partial support footnote Only supported on Windows. Firefox – Full support Firefox 3 (Release date: 2008-06-17) footnote footnote Before Firefox 40, `font-size-adjust: 0` was incorrectly interpreted as `font-size-adjust: none` (bug 1144885).	Opera – Full support Opera 113 (Release date: 2024-08-22) footnote Full support	Safari – Full support Safari 16.4 (Release date: 2023-03-27) footnote Full support	Chrome Android – Full support Chrome Android 127 (Release date: 2024-07-23) footnote Full support	Firefox for Android – Full support Firefox for Android 4 (Release date: 2011-03-29) footnote footnote Before Firefox for Android 40, `font-size-adjust: 0` was incorrectly interpreted as `font-size-adjust: none` (bug 1144885).	Opera Android – Full support Opera Android 84 (Release date: 2024-08-26) footnote Full support	Safari on iOS – Full support Safari on iOS 16.4 (Release date: 2023-03-27) footnote Full support	Samsung Internet – Full support Samsung Internet 28 (Release date: 2025-04-02) footnote Full support	WebView Android – Full support WebView Android 127 (Release date: 2024-07-23) footnote Full support	WebView on iOS – Full support WebView on iOS 16.4 (Release date: 2023-03-27) footnote Full support

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

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

font-size-adjust

Example

Usage notes

Specifications

Browser compatibility

Legend

See also