CSS font-size-adjust Property
Description
The font-size-adjust
property adjusts the font-size of the fallback fonts defined with font-family, so that the x-height is the same no matter what font is used. This preserves the readability of the text when fallback happens.
- Initial value
- none
- Applies to
- All elements
- Inherited
- Yes
- Media
- Visual
- Computed value
- As specified
- Animatable
- Yes
- CSS Version
- CSS2, CSS3
- 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
<p class="times">This text uses the Times font (10px), which is hard to read in small sizes.</p>
<p class="verdana">This text uses the Verdana font (10px), which has relatively large lowercase letters.</p>
<p class="adjtimes">This is the 10px Times, but now adjusted to the same aspect ratio as the Verdana.</p>
.times {
font-family: Times, serif;
font-size: 10px;
}
.verdana {
font-family: Verdana, sans-serif;
font-size: 10px;
}
.adjtimes {
font-family: Times, serif;
font-size-adjust: 0.58;
font-size: 10px;
}
Give it a Try
Click the button below to experiment with this property.
Browser Support
Desktop | |||||
X | X | 54 | 40 | 41 | X |
Tablets / Mobile | |||||
![]() |
|||||
54 | 54 | 4 | 41 | X | 6.0 |
Last updated by CSSPortal on: 1st November 2019