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.

Give it a Try!

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
XX544041X
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
5454441X6.0

Last updated by CSSPortal on: 1st November 2019