CSS font-size-adjust Property


The font-size-adjust property in CSS is used to adjusts the font size based on the height of lowercase rather than capital letters and gives the better control of the font size. It is very useful when the text has given multiple styles and has adjust the font while changing in between those styles.

This can be helpful for legibility of small text, especially when the font in use is unpredictable (such as being a second choice font in a font-family list). When more than one font is being used it also allows the fonts to be aligned vertically in respect to the lowercase rather than uppercase letters.

The font-size-adjust property gives you better control of the font size when the first selected font is not available.

When a font is not available, the browser uses the second specified font. This could result in a big change for the font size. To prevent this, use the font-size-adjust property.

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

Syntax

font-size-adjust: number|none|initial|inherit;
Property values:
  • number: It sets the number to the font-size-adjust property.
  • none: It sets the default value.
  • initial: It sets the font-size-adjust property to its default value.
  • inherit: The font-size-adjust property is inherited from its parent.

Supported Browsers:

  • Firefox: 52.0, 2.0 -moz-
  • Google Chrome: 50.0, 4.0 -webkit-
  • Internet Explorer: 10.0
  • Safari: 9.0, 3.1 -webkit-
  • Opera: 37.0, 15.0 -webkit-, 11.1

Example -