font-size-adjust property is used for scaling the x-height of a font.
font-size-adjust property can be useful, because, for a given size, some fonts are harder to read than others. This can become an issue particularly if your first-choice font is unavailable, and the next available font has a different aspect ratio (potentially making the fallback font harder to read). You can use
font-size-adjust to adjust the x-height to give the fallback font the same x-height as your first choice font, thus making the backup font more legible.
Here's an example to demonstrate how
font-size-adjust works. This example compares two fonts of different x-heights, and shows how one can be "adjusted" so that it matches the x-height of the other font.
A Paragraph Example
Here's an example that demonstrates how your fallback font could inadvertently cause your website to become unreadable.
Here's the code used to generate this example.
- Specifies that the font's x-height is not preserved.
This value refers to the aspect number of the first choice font. The available fonts will be scaled according to the following formula:
c = ( a / a' ) s
s = font-size value a = aspect value as specified by the 'font-size-adjust' property a' = aspect value of actual font c = adjusted font-size to use
For example, if 12px Georgia (with an aspect value of 0.50) was unavailable and an available font had an aspect value of 0.40, the font-size of the substitute would be 12 * (0.50/0.40) = 15px.
In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:
- Represents the value specified as the property's initial value.
- Represents the computed value of the property on the element's parent.
- This value acts as either
initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.
- CSS Fonts Module Level 3 (W3C Candidate Recommendation 3 October 2013)
- CSS Level 2 (W3C Recommendation 12-May-1998)
Note that the
font-size-adjust property was initially introduced in CSS2, removed in CSS2.1, but then re-introduced in CSS3.
The following table provided by Caniuse.com shows the level of browser support for this feature.