Home/ Questions/Q 8785979
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T21:29:30+00:00

I’d like to set different line-height for different fonts from a list fall-back fonts.

  • 0

I’d like to set different line-height for different fonts from a list fall-back fonts. For example:

body {
    font-family: "Small x-height font", "Larger x-height font", sans-serif;
}

When the preferred Small x-height font is used, I’d like to set line-height to 1.3. When Larger x-height font is used because the preferred font is not available, I’d like to set line-height to 1.5. When both fonts are not available and the sans-serif fallback is used, I’d like to set line-height to normal.

Is this possible using CSS 2.1 or CSS 3 without resorting to JavaScript?

Rationale The problem is that different fonts have different x-height (the height of lowercase letters such as x relative to the font size). To make text with larger x-height look good, it must be set with a larger line height. The x-height of the default fonts (sans-serif in the example above) is unknown and may differ drastically from the x-height of the font of our choice. So a line height that looks good with our font may look ugly when the font failed to load.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There is a font-size-adjust property in CSS3 which addresses this problem. You can specify font-size-adjust: 0.6 for your body and all fonts will be transparently scaled to have the x-height of 0.6em. This has the additional benefit that you can combine fonts with different original x-height on the same line and they will have roughly the same lowercase letter size without the need to adjust font sizes manually.

    Only Firefox implements font-size-adjust (as of November 2012). WebKit does not.

    See the CSS3 Fonts specification for more information and David Baron’s post for some examples.

    • 0