font-size-adjust

Writing the value

• none: the initial value. No adjustment. Even with the same font-size, lowercase letters look taller or shorter depending on the font.
• A number such as 0.5: changes the size of each font so that the measure to match (by default, the height of a lowercase x) is that share of the font-size. With 0.5 and font-size: 64px, the x is 32px tall.
• from-font: uses the ratio of that measure in the first available font instead of a number. The first font keeps its size, and the other fonts match its measure.

You can write the measure to match before the number or from-font. When left out, it is ex-height.

• ex-height: the height of a lowercase x
• cap-height: the height of capital letters
• ch-width: the width of the digit "0"
• ic-width and ic-height: the width and height of the CJK character "水". Use them to match the size of full-width characters such as Japanese.

The preview shows "Ax" in the box's font (sans-serif) next to "Ax" in a serif font such as Times New Roman. With none the serif x is shorter even at the same font-size, and with 0.5 both x's line up at the same height.

When to use it

Use it to bring the apparent size of a fallback font, shown when the chosen font is missing or while a web font is loading, closer to the chosen font.

Watch out

• It is inherited, so setting it on the box affects all the text inside. With a number, the first font changes size too and no longer matches the font-size you wrote. Use from-font to keep the first font as it is.
• While a web font has not loaded yet, a fallback font is the "first available font", so from-font uses that font's ratio.
• Every form you can pick here works from Chrome and Edge 127, Firefox 118, and Safari 17.