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

HTML

<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>

CSS

.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;
}

Result