font-size-adjust

Definition

The font-size-adjust property in CSS is used to adjust the font size based on the aspect ratio of the font. This property allows the designer to specify an aspect value which will ensure that the font appears at the same relative size, regardless of the font used. This feature can improve readability and design consistency across different fonts.

Examples

Specify the aspect ratio of the font for a heading:

h1 {
  font-family: "Open Sans", sans-serif;
  font-size: 2em;
  font-size-adjust: 0.5;
}

Specify the aspect ratio of the font for body text:

body {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  font-size-adjust: 0.6;
}

Disable the font size adjustment feature:

p {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2em;
  font-size-adjust: none;
}

Values

Best Practices

• Use the font-size-adjust property to maintain consistency in font size across different fonts with similar aspect ratios.
• Test your font-size-adjust settings on different devices and browsers to ensure that they are supported and display correctly.
• Choose an appropriate aspect ratio value based on the font and content, and consider the intended audience when applying the feature.
• Be aware that not all fonts support font size adjustment, and that the level of support may vary between fonts and browsers.
• Use font size adjustment in conjunction with other font properties, such as font-size, to achieve the desired text appearance.

Browser Compatibility