X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS font-size-adjust Property

The font-size-adjust property controls the font size when the first selected font is not available. When a font is not available, the browser uses the second specified font. Thus, the font size can be changed. The font-size-adjust controls this process.

The font-size-adjust property is one of the CSS3 properties.

All fonts have an "aspect value" which is the difference of size between the lowercase letter and the uppercase letter.

Initial Value none
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable Yes.
Version CSS3
DOM Syntax object.style.fontSizeAdjust = "0.5";

Syntax

font-size-adjust: number | none | initial | inherit;

Example of the CSS font-size-adjust property:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      div.a {
      font-family: sans-serif;
      }
      div.b {
      font-family: 'times new roman';
      }
      #box-one, #box-two {
      font-size-adjust: 0.58;
      }
    </style>
  </head>
  <body>
    <h2>Font-size-adjust property example</h2>
    <h2>Two divs with the same font-size-adjust property:</h2>
    <div id="box-one" class="a">
      The font-size-adjust CSS property sets how the font size should be chosen based on the height of lowercase rather than capital letters.
    </div>
    <div id="box-two" class="b">
      The font-size-adjust CSS property sets how the font size should be chosen based on the height of lowercase rather than capital letters.
    </div>
    <h2>Two divs without the font-size-adjust property:</h2>
    <div class="a">
      The font-size-adjust CSS property sets how the font size should be chosen based on the height of lowercase rather than capital letters.
    </div>
    <div class="b">
      The font-size-adjust CSS property sets how the font size should be chosen based on the height of lowercase rather than capital letters.
    </div>
  </body>
</html>

Values

Value Description
none No any font size adjustment. This is the default value of the property.
number Sets the aspect value.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Browser support

x x 3.0+ x x


Do you find this helpful?

Related articles