CSS font-size-adjust Property

CSS font-size-adjust Property

The font-size-adjust property in CSS allows you to maintain readability by adjusting the x-height of a font. This ensures that text remains visually consistent across different fonts, even if they have different default sizes.

1. Syntax

selector {
  font-size-adjust: value;
}

2. Property Values

Value	Description
none	Default value; no font-size adjustment.
<number>	A ratio that adjusts the font size based on x-height.

3. Example Usage

A. Without font-size-adjust

p {
  font-family: "Times New Roman", serif;
  font-size: 16px;
}

✅ If the browser falls back to another font (e.g., Arial), the text size may appear inconsistent.

B. With font-size-adjust

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

✅ Ensures that different fonts have a consistent x-height.

4. How Does It Work?

• The property adjusts the font size based on the x-height of the preferred font.
• If the fallback font has a smaller x-height, the browser increases its size to match the original font's proportions.

5. Why Use font-size-adjust?

• Improves legibility when fonts change due to unavailability.
• Ensures consistent text height across different fonts.
• Especially useful for accessibility and UI design.

6. Browser Support

🔸 Limited Support – Works in Firefox and some modern browsers.
🔹 Alternative: Use relative units (em, rem) for font sizing.

p {
  font-size: 1em;
}

✅ Works in all browsers.