CSS font-size-adjust Property

The font-size-adjust property preserves the readability of text when the primary font-family is unavailable and a fallback font is substituted. It does this by forcing the rendered text to keep a target x-height regardless of which font in the stack is actually used.

Why x-height matters

The x-height is the height of lowercase letters (like the letter "x"), measured from the baseline. The em-height is the full font size. The ratio between them is called the font's aspect value:

aspect value = x-height / em-height

Two fonts set at the same font-size can still look noticeably different in size, because their aspect values differ. For example, Verdana (aspect value ~ 0.58) looks larger and more readable than Georgia (~ 0.52) at the same point size. So when a fallback font replaces your primary font, the substituted text can look too big or too small even though font-size never changed.

font-size-adjust fixes this. When you give it a number, the browser scales whichever font is in use so its x-height equals that number times the current font-size. The visual size of lowercase letters then stays constant no matter which font wins the fallback chain.

A practical workflow: take the aspect value of your preferred (first-choice) font and pass it as the font-size-adjust value. The fallback fonts are then nudged to match the look of your preferred font.

Initial Value	none
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	Yes.
Animatable	Yes.
Version	CSS2.1
DOM Syntax	object.style.fontSizeAdjust = "0.5";

Note: Browser support for font-size-adjust is poor. Firefox supported it until version 118, then removed it in version 119 (2023), and it has never shipped in Chrome, Safari, or Edge. In practice you can no longer rely on it. The most robust modern approach is to self-host your fonts (so the fallback rarely fires) and tune the fallback face with the size-adjust, ascent-override, and descent-override descriptors inside an @font-face rule.

Syntax

Syntax of CSS font-size-adjust Property

font-size-adjust: number | none | initial | inherit;

Example of the font-size-adjust property

In the example below, both paragraphs request a font that is unlikely to be installed ("Made Up Font") and fall back to sans-serif. The second paragraph adds font-size-adjust, so its fallback text is normalized to a fixed x-height. In a browser that still implements the property, the adjusted paragraph reads more consistently:

<!DOCTYPE html>
<html>
  <head>
    <title>font-size-adjust example</title>
    <style>
      p {
        font-family: "Made Up Font", sans-serif;
        font-size: 20px;
      }
      .adjusted {
        font-size-adjust: 0.5;
      }
    </style>
  </head>
  <body>
    <h1>font-size-adjust</h1>
    <p>Without font-size-adjust: the fallback font keeps its own x-height.</p>
    <p class="adjusted">
      With font-size-adjust: 0.5 the fallback x-height is normalized.
    </p>
  </body>
</html>

Try it Yourself »

Values

Value	Description
none	No font size adjustment. This is the default value of the property.
number	A positive number representing the aspect ratio (x-height divided by em-height).
initial	It makes the property use its default value.
inherit	It inherits the property from its parent element.

Browser Compatibility

Browser	Support
Chrome	No support
Firefox	1.5–118 (removed in v119)
Safari	No support
Edge	No support
Opera	No support

Practice

What is the main function of the 'font-size-adjust' property in CSS?

It controls the boldness of a font.It preserves the x-height of a font and ensures that it is not distorted when changed.It adjusts the color of the font.It makes sure the readability of lowercase letters is preserved when the font is changed.It resizes the font to fit the width of the viewport.