CSS font-size-adjust Property

What You’ll Learn

The font-size-adjust property keeps lowercase letters at a similar visual size when fallback fonts replace your first-choice font in a stack.

Introduction

The font-size-adjust property in CSS is used to improve the legibility of text by adjusting the font size based on the aspect value of the first-choice font.

This property ensures that the x-height (height of the lowercase “x”) remains consistent, even when fallback fonts are used. This can be particularly useful when fallback fonts have different aspect ratios, leading to more visually consistent text rendering.

Definition and Usage

When a web font fails to load, the browser picks the next font in your font-family list. Two fonts at the same font-size can look very different because their x-heights differ. font-size-adjust compensates by scaling the used font size so the x-height matches your chosen aspect value.

📝 Syntax

The syntax for the font-size-adjust property is straightforward. You can specify a numeric value or none:

element {
  font-size-adjust: value;
}

Here, value can be a number representing the aspect value or none to disable the adjustment.

Basic Example

p {
  font-family: "Arial", sans-serif;
  font-size-adjust: 0.5;
}

Default Value

The default value of the font-size-adjust property is none, meaning no adjustment is applied and the font size is rendered normally based on the font-size setting.

Syntax Rules

• Accepts none or a positive number (the aspect value).
• The aspect value is typically between about 0.4 and 0.6 for common web fonts.
• The property is not inherited by default in the classic syntax, but set it on elements where fallback consistency matters.
• Works alongside font-family and font-size — it adjusts the used size, not the declared size directly.
• Most useful when primary and fallback fonts have noticeably different x-heights.

💎 Property Values

Common aspect values (approximate)

Exact values vary by font file and browser metrics. Use these as starting points when tuning readability.

Examples Gallery

Adjust font size based on an aspect value of 0.5, then compare none vs number, mixed font stacks, and different aspect values side by side.

<style>
  p {
    font-family: "Arial", sans-serif;
    font-size-adjust: 0.5;
  }
</style>

<p>
  This paragraph's font size is adjusted to maintain a consistent x-height
  even when fallback fonts are used.
</p>

.no-adjust { font-size-adjust: none; }
.with-adjust { font-size-adjust: 0.52; }

.article-body {
  font-family: Verdana, Arial, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-size-adjust: 0.545;
}

.aspect-45 { font-size-adjust: 0.45; }
.aspect-50 { font-size-adjust: 0.50; }
.aspect-55 { font-size-adjust: 0.55; }

♿ Accessibility

• Consistent x-height improves readability when users rely on fallback fonts or slow connections delay web font loading.
• Do not rely on font-size-adjust alone — still set a comfortable base font-size (typically at least 1rem for body text).
• Test with fonts disabled or blocked to see how fallbacks look for users who block remote fonts.
• Verify contrast and line length after adjustment, since scaling can affect layout spacing.
• Respect user zoom settings — adjustment works within the normal font rendering pipeline.

💡 Best Practices