CSS font-size-adjust Property

When the font which we have specified in the font-family property is not available or not supported by the browser, the next specified font is used as a fallback. This could result in a bigger or smaller font size. To overcome this problem we use the font-size-adjust property which preserves the font size regardless of the font.

The font-size-adjust property takes aspect ratio as a value, which is the ratio of lowercase font height to uppercase font height.

In the example below, the lowercase letters’ font height will be maintained as 8px(16*0.5) regardless of the fonts used. If the browser does not support font-size-adjust property, the 16px fonts will be used. Try it out:

Example:

.p1{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-size-adjust: 0.5;
}
.p2{
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  font-size-adjust: 0.5;
}

CSS Syntax

The font-size-adjust property has the following syntax:

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

Property Values

The font-size-adjust property accepts the following values:

noneThis is the default value. Specifies no font size adjustment.
numberSpecifies the aspect value which is used to adjust the font size.
initialSets the font-size-adjust property to its default value(none).
inheritInherits the font-size-adjust property from the parent element.

General Info

Default Valuenone
InheritedYes
JavaScript Usageelement.style.fontSizeAdjust = “0.5”;

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment