CSS font-size-adjust Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The font-size-adjust property lets authors preserve the perceived size and legibility of text by tying font sizing to the font’s x-height (the height of lowercase letters like “x”) rather than only to the font’s nominal point size. When a font substitution happens (for example because a preferred web font fails to load or the user’s system lacks the chosen typeface), differences in x-height between the intended font and the fallback can make text look noticeably larger or smaller even though the numeric font-size is the same. By taking the x-height relationship into account, font-size-adjust helps keep lowercase letterforms visually consistent across different fonts.

Under the hood, this property works with the font metrics of the active typefaces: it measures (conceptually) the aspect of x-height to the font’s size, and uses that aspect to scale fallback fonts so their lowercase letters appear closer in visual size to the intended font. This behavior is distinct from changing which font is chosen; it adjusts the effective sizing of the fallback to maintain legibility. Because it affects how the font is scaled, it will influence layout in the same way changing font-size would, so authors should be mindful of potential reflows. It also interacts with vertical spacing rules (for example, line-height) since scaling the font changes the space text occupies and can affect line breaks and overall rhythm.

Practical uses for font-size-adjust include improving readability when using custom web fonts with widely varying x-heights, providing more predictable appearance when relying on system or generic fallback stacks, and making small-size text less vulnerable to legibility regressions across platforms. It can be especially useful for UI elements and body text where consistent lowercase proportions are important for user comprehension. That said, it’s a tool to be used selectively: because it alters the effective font sizing for fallback fonts, it can introduce layout shifts and should be tested across the actual fonts and platforms you expect your audience to use.

For best results, pair font-size-adjust with deliberate font-family choices and font-loading strategies so you know which fallbacks are likely to be used, and verify how scaling affects line breaks and element sizing in your design. Remember that user zoom and accessibility settings remain authoritative, and that maintaining good contrast, adequate spacing, and appropriate typeface choices often produces the biggest gains in legibility alongside metric-based adjustments.

Definition

Initial value: none
Applies to: All elements
Inherited: Yes
Computed value: As specified
Animatable: Yes
JavaScript syntax: object.style.fontSizeAdjust

Syntax

font-size-adjust: none | <number>

Values

noneChoose 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 metric of the font) are the specified number times the font-size.

Example

HTML

<body>

  <div class="example">

    <h1>font-size-adjust demo</h1>

    <div class="row">

      <div class="box no-adjust">

        <h2>Without font-size-adjust</h2>

        <p class="compare">The quick brown fox jumps over the lazy dog  -  serif fallback.</p>

      </div>

      <div class="box with-adjust">

        <h2>With font-size-adjust: 0.5</h2>

        <p class="compare">The quick brown fox jumps over the lazy dog  -  serif fallback.</p>

      </div>

    </div>

    <p class="note">Both paragraphs use a serif font stack. The right column sets font-size-adjust to preserve x-height consistency across fonts.</p>

  </div>

</body>

CSS

/* Basic page styles */
body {
  font-family: Arial, sans-serif;
  background: #f6f8fb;
  color: #222;
  margin: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.example {
  max-width: 900px;
  margin: 0 auto;
}

.row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.box {
  flex: 1;
  background: #fff;
  border: 1px solid #e1e6ef;
  padding: 18px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(20, 30, 40, 0.04);
}

.box h2 {
  margin: 0 0 12px 0;
  font-size: 15px;
  color: #333;
}

/* The text we want to compare */
.compare {
  margin: 0;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 32px;
  line-height: 1.15;
}

/* Left: default (no font-size-adjust applied) */
.no-adjust .compare {
  /* no font-size-adjust here  -  uses font's default metrics */
}

/* Right: apply font-size-adjust to preserve x-height (example value 0.5) */
.with-adjust .compare {
  font-size-adjust: 0.5;
}

/* Small explanatory note */
.note {
  margin-top: 14px;
  font-size: 13px;
  color: #666;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS font-size-adjust property. Hover over a browser icon to see the version that first introduced support for this CSS property.