CSS - font-size-adjust Property

Quiz

CSS font-size-adjust property is used to adjust the font size of an element to maintain consistent readability when the font-family is changed. It helps ensure that text appears at a similar size across different fonts, which can be particularly useful when using a fallback font.

Syntax

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

Property Values

Value	Description
none	It specifies that no font size adjustment is made based on the x-height. Default.
number	It specifies a numerical value that represents the aspect value, which is the ratio of the x-height of the font to the x-height of the font specified by the font-family property.
initial	This sets the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of CSS Font Size Adjust Property

The following examples explain the font-size-adjust property with different values.

Font Size Adjust Property with None Value

To prevent any adjustment based on the aspect ratio of the font, and to use the specified font size directly without modifying it according to the font's x-height, we use the none value for the font-size-adjust property. This is the default value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      body {
         font-family: Arial, sans-serif;
         font-size: 20px;
      }

      .adjusted {
         font-family: "Georgia", serif;
         font-size: 20px;
         font-size-adjust: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size-adjust property
   </h2>
   <p>
      This is text using the default font family (Arial)
      with a font size of 20px.
   </p>
   <p class="adjusted">
      This is text using Georgia with font-size-adjust
      set to none. The font size is not adjusted relative
      to Georgia's x-height.
   </p>
</body>

</html>

Font Size Adjust Property with Numeric Values

To ensure that text maintains consistent readability and size when switching between fonts with different x-heights, we specify a positive value (e.g. 0.25, 1 etc.) to the font-size-adjust property. The value ensures that the text rendered with the next font is consistent in size with the first font. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         font-family: Arial, sans-serif;
         font-size: 20px;
      }

      .adjusted {
         font-family: "Georgia", serif;
         font-size: 20px;
         font-size-adjust: 0.5;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size-adjust property
   </h2>
   <p>
      This is text using the default font family.
   </p>
   <p class="adjusted">
      This is text using Georgia with font-size-adjust applied.
   </p>
</body>

</html>

Note: Only 'Firefox' browser supports the font-size-adjust property.

Supported Browsers

Property
font-size-adjust	Not Supported	Not Supported	3.0	Not Supported	Not Supported

css_reference.htm

Print Page