CSS - font-size-adjust



The font-size-adjust property can be used to specify a font's aspect value (numeric ratio) that controls the x-height (height of lowercase letters) of the font.

This ensures that the fallback font maintains a consistent visual size and proportion relative to the specified font.

Possible Values

  • <number>: 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.

  • none: Specifies that no font size adjustment is made based on the x-height.

  • <keyword>: Specifies the font metric to normalize on:

    • ex-height: x-height divided by font-size.

    • cap-height: Using cap-height by font-size.

    • ch-width: Horizontal narrow pitch of the fonts is normalized.

    • ic-width: Horizontal wide pitch of the fonts is normalized.

    • ic-height: Vertical wide pitch of the fonts is normalized.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontSizeAdjust = "0.61";

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

CSS font-size-adjust - Basic Example

Here is an example:

<html>
<head>
<style>
   p {
      padding: 5px;
      border: 2px solid blue;
   }
   p.p1 {
      font-family: 'Courier New', Courier, monospace;
      font-size-adjust:none;
   }
   p.p2 {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 20pt;
      font-size-adjust: 0.6;
   }
   p.p3 {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 20pt;
      font-size-adjust: ex-height 0.6;
   }
</style>
</head>
<body>
   <h2>Font-size</h2>
   <p class="p1">
      The font-size-adjust is none.
   </p>
   <p class="p2">
      The font-size-adjust is 0.6 on font-size 20pt.
   </p>
   <p class="p3">
      The font-size-adjust is ex-height and 0.6 on font-size 20pt.
   </p>
</body>
</html>
Advertisements