CSS font-size-adjust Property

Definition and Usage

The font-size-adjust property scales text so a font metric — by default lowercase x-height — matches a chosen proportion of font-size.

Use it when a font-family stack has fallbacks that look smaller or larger at the same size. Matching the primary font’s aspect value keeps fallbacks more legible, especially at small sizes.

CSS Syntax

The initial value is none. A bare number uses the default metric ex-height. Numbers must be 0 or greater.

Property Values

How to Use font-size-adjust

Find the primary font’s aspect value, then apply it so fallbacks keep a similar lowercase height.

1. Build a font-family stack with a first-choice font and clear fallbacks.
2. Set a normal font-size for the text.
3. Set font-size-adjust to the primary font’s aspect value (or use from-font).
4. Compare with none — adjusted fallbacks should look closer in apparent size.

Live Preview

Times New Roman often looks smaller than Verdana at the same font-size. Change font-size-adjust on the Times line.

CSS Examples

Each snippet focuses on font-size-adjust. Use Try It Yourself for a live editor.

<style>
  p {
    font-family: Times, "Times New Roman", serif;
    font-size: 16px;
    font-size-adjust: 0.5;
  }
</style>

<p>Adjusted with aspect value 0.5.</p>

<style>
  .primary {
    font-family: Verdana, sans-serif;
    font-size: 14px;
  }
  .fallback {
    font-family: Times, "Times New Roman", serif;
    font-size: 14px;
    font-size-adjust: 0.545;
  }
</style>

<p class="primary">Verdana reference.</p>
<p class="fallback">Times matched to Verdana.</p>

<style>
  p {
    font-family: Verdana, Times, serif;
    font-size: 16px;
    font-size-adjust: from-font;
  }
</style>

<p>Metric comes from the first available font.</p>

Key Takeaways