Question

I have observed some rather inconsistent HTML page rendering behavior when CSS line-height property is set to normal. I have also found a blog post by Eric Meyer where different inconsistencies of line-height: normal; are discussed, here is just one quote:

Here’s the punchline: the effects of declaring line-height: normal not only vary from browser to browser, which I had expected—in fact, quantifying those differences was the whole point—but they also vary from one font face to another, and can also vary within a given face.

In my case i observed that adding some Unicode symbols, for example the envelope symbol “✉”, changes the line block height if line-height is set to normal. Setting line-height: 1.2; fixes the problem.

My question is: is there any reason at all to use line-height: normal;? It behaves so unpredictably.

Answer 1

In principle, a normal value for line-height (either via defaulting, or by explicit setting) is “normal”: browsers are expected to use a value that is suitable for the font being used. This variation should not be a surprise: it’s implied in the definition.

This is supposed to help with a problem like this: you declare font-family: a, b, c, d, sans-serif, but you don’t know which of the specific fonts (if any) is available in each computer, or what the default sans-serif font might be. These fonts might require different line heights, for good appearance. The browser knows which font it is using, so it can pick up a line height for it, from its internal table.

On the practical side, browsers might not select the value well; it tends to be generally a little too small. On the typography side, line height should be selected on the basis of several considerations, not just font face but also the type of text (e.g., texts with a lot of diacritic marks require larger line height) and especially the measure (column width, line length): long lines require larger line height.

So in general, it is best that the designer sets the line height, with due consideration of the different aspects.

This also avoids the problem you describe: when a line contains glyphs from different fonts, each font may have a different default line height associated with it. For example, the envelope symbol is included in a few fonts only, so the odds are that the browser is forced to pick it up from a font different from the one you have declared.

This is what causes uneven line spacing when you mix fonts. It’s not the height of the glyph that matters but the line height of its font. For example, adding a mere period “.” in Cambria Math font, when available, causes huge line spacing—unless you set line-height to a specific value.