CSS font-size-adjust property

Definition and Usage

The 'font-size-adjust' property sets an aspect value for an element, thus maintaining the x-height of the preferred font.

Description

The ratio of the height of the lowercase letter 'x' to the height of the 'font-size' is called the aspect value of a font. When a font has a high aspect value, it is easier to read when the font is set to a very small size. For example: Verdana's aspect value is 0.58 (meaning when the font size is 100px, its x-height is 58px). Times New Roman's aspect value is 0.46. This means that Verdana is easier to read at small sizes than Times New Roman.

See also:

CSS Tutorial:CSS Font

CSS Reference Manual:CSS font property

HTML DOM Reference Manual:fontSizeAdjust attribute

Example

Set the font-size-adjust property of different HTML elements:

h1
  
  font-size-adjust:0.58;
  
p
  
  font-size-adjust:0.60;

Try it yourself

CSS syntax

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

Attribute value

Value Description
none Default. If this font is not available, it does not maintain the x-height of this font.
number

Define the aspect value ratio of the font.

Formula available:

Preferred font size * (font-size-adjust value / aspect value of available font) = font size applied to the available font

Example:

If 14px Verdana (aspect value is 0.58) is not available, but the aspect value of some available font is 0.46, then the size of the substitute font will be 14 * (0.58/0.46) = 17.65px.

Technical details

Default value: none
Inheritance: yes
Version: CSS2
JavaScript syntax: object.style.fontSizeAdjust="0.70"

Try It Yourself example

Using font-size-adjust to set font size
This example demonstrates how to use font-size-adjust to set font size.

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
Not supported Not supported 3.0 Not supported Not supported