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
X	79	43	40	30	X
Tablets / Mobile
X	43	4	30	X	X

Last updated by CSSPortal on: 1st November 2019