CSS font-size-adjust Property
The font-size-adjust CSS property sets how the font size should be chosen based on the height of the lowercase rather than capital letters.
The font-size-adjust property controls how the font size is calculated when a fallback font is used. It ensures that the fallback font's x-height matches the primary font's x-height, maintaining consistent readability.
The font-size-adjust property is a CSS 2.1 properties index.
All fonts have an "aspect value", which is the ratio of the x-height to the em-height. This value can be found in font documentation or calculated using online tools. For example, Georgia has an aspect value of approximately 0.52, while Verdana is around 0.58.
| 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:
font-size-adjustis considered obsolete for modern web development. Firefox removed support in version 119 (2023), and it has never been supported in Chrome, Safari, or Edge. For modern alternatives, consider usingfont-optical-sizingor manually adjustingfont-sizewith media queries.
Syntax
Syntax of CSS font-size-adjust Property
font-size-adjust: number | none | initial | inherit;Example of the font-size-adjust property:
Example of CSS font-size-adjust Property with number value
<!DOCTYPE html>
<html>
<head>
<title>The title of the document </title>
<style>
div.a {
font-family: Georgia, Verdana, sans-serif;
}
div.b {
font-family: Verdana, Georgia, sans-serif;
}
#box-one,
#box-two {
font-size-adjust: 0.52;
}
</style>
</head>
<body>
<h1>Font-size-adjust property example</h1>
<h2>Two divs with the same font-size-adjust property:</h2>
<div id="box-one" class="a">
This demonstrates how the primary font renders when available.
</div>
<div id="box-two" class="b">
Here the fallback font takes precedence in the font stack.
</div>
<h2>Two divs without the font-size-adjust property:</h2>
<div class="a">
Without adjustment, the fallback font may appear significantly larger or smaller.
</div>
<div class="b">
The font-size-adjust property ensures visual consistency across different typefaces.
</div>
</body>
</html>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?