Setting different line heights depending on the font

Question

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.

It's too bad you can't specify `line-height` in `@font-face`. If you head down the JS path, this jQuery plugin will allow you to set additional CSS properties when your font fails to load. http://stackoverflow.com/questions/12312323/how-to-know-if-a-font-font-face-has-already-been-loaded/12316349#12316349 — Patrick, Nov 04 '12 at 10:18
Here is a similar question: http://stackoverflow.com/questions/3555962/css-different-font-sizes-on-different-families — Till Ulen, Nov 04 '12 at 11:33

score 5 · Answer 1 · answered Nov 03 '12 at 21:33

I don't believe there is a way to do this in the exact way you are requesting. However, I can tell you that if you are using a font service (eg Typekit), you may be able to style fallback fonts depending on whether the font has been loaded or not.

In Typekit's case, they add classes to the element when the font is loading, loaded, or inactive. They also provide classes for the specific fonts/weights.

You can then provide specific styling depending on the situation.
Here's a rough example:

body {
  font: 400 16px/1.5 "typekit-font", "fallback-font";
}
.wf-inactive body {
  font-weight: normal;
  line-height: 1.8;
}

More information can be found in their corresponding help article.

Thanks. It turns out that CSS3 has a property called font-size-adjust that was designed to address varying x-height of different fonts. See my answer for details. — Till Ulen, Nov 04 '12 at 03:29

Till Ulen · Accepted Answer · 2012-11-04T03:26:12.623

1

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.

edited Nov 04 '12 at 03:26

answered Nov 04 '12 at 02:41

Till Ulen

1,759
1
17
17

2

The `font-size-adjust` property affects the size of the font, not line height. Moreover, its Firefox implementation is broken, as it uses wrong x-height information. So it’s a theoretically interesting answer to a question related to, but distinct from, the one asked. – Jukka K. Korpela Nov 04 '12 at 06:50
1

The question was not about setting arbitrary line heights for different fonts. The intent was to match the line height to the font's x-height to make fallback fonts look just like the preferred font. So a working `font-size-adjust` property would be an ideal solution. – Till Ulen Nov 05 '12 at 20:47
The question as asked was titled “Setting different line heights depending on the font”. And `font-size-adjust`, even if it were properly implemented, would not do that; see http://www.w3.org/TR/css3-fonts/#font-size-adjust-prop. I can see that you probably meant to ask about font size – but you didn’t. – Jukka K. Korpela Nov 05 '12 at 21:12
Agree Q mixes height and size, but the goal of matching x-height is pretty clear. The adjutsed size will also affect the line height, if it's in `ex` but not if unit-less / in percents: http://codepen.io/cben/pen/KwrmML. And if one really wanted to increase line height without changing size, it shouldn't be hard to abuse `font-size-adjust` on invisible text... – Beni Cherniavsky-Paskin Mar 16 '15 at 14:45

score 0 · Answer 3 · answered Nov 03 '12 at 22:46

In CSS, you cannot make the value of a property depend on the choice of a font. Basically, properties are independent of each other, with some exceptions that do not apply here.

Normally, fonts in a font-family list should be more or less similar in general characteristics. It’s not just a line-height matter. The choice of a font affects the page as a whole.

A different strategy is to use a downloadable font via @font-face. Then you can be reasonably sure that your font will be used, and you can set line height and other properties according to it.

There are some corner cases when an @font-face font cannot be loaded. Those include networking problems, external font service downtime, NoScript or another security tool blocking font loading, a saved page being viewed offline, etc. My question is concerned specifically with those cases. — Till Ulen, Nov 04 '12 at 02:12

Setting different line heights depending on the font

3 Answers3