"String-height: normal"; bad idea?

Question

I observed some rather inconsistent HTML page rendering behavior when the CSS line-height set to normal . I also found Eric Mayer's blog post discussing various line-height: normal; inconsistencies line-height: normal; , here is just one quote:

Here's what it says: the effects of the line-height: normal declaration not only vary from browser to browser, which I expected - in fact, these differences were quantitatively whole, but they also varied from one font to another, and can also vary within given person.

In my case, I noticed that adding some Unicode characters, such as the envelope character "✉", changes the height of the string block if line-height set to normal . Setting line-height: 1.2; fixes the problem.

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

Answer 1

In principle, the normal value for line-height (either by default or by explicit settings) is "normal": it is assumed that browsers use a value suitable for the font used. This option should not be unexpected: it is implied in the definition.

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

On the practical side, browsers cannot select a value well; he is usually too small. On the printing side, the line height should be selected based on several considerations, not just the font, as well as the type of text (for example, texts with a large number of diacritics require a higher line height) and, in particular, measure (column width, line length): long lines require a greater line height.

In general, it is best for the designer to set the height of the line, taking into account various aspects.

This also avoids the described problem: when a line contains glyphs from different fonts, each font can have a different default line height associated with it. For example, an envelope symbol is included in only a few fonts, so it is likely that the browser will force it to pick it up from a font other than the one you announced.

This is what causes uneven line spacing when you mix fonts. This is not the height of the glyph that matters, but the height of the font line. For example, adding a simple period of "." in the Cambria Math font, whenever possible, it causes a huge spacing between the lines - unless you set the line-height to a specific value.

Answer 2

Is there any reason to use the string-height: normal;

Yes - there is a property, so you can use it when you specifically use reset line-height for the default browser, if you set it somewhere on the parent element.

Why and when you want to do this depends on what you are implementing, and whether you are interested in ideal pixel pixel designs or not.

Answer 3

"normal" is the default value for "line-height". You clearly declare a linear height: normal for excessive driving.

Example:

 h1 { line-height: 150%; } h1.normal { line-height: normal; } 

If you look at the snippet above, I declared a line height of 150% for the h1 tag. In case I want a specific h1 tag to behave normally [a specific line in the browser], I turned it over with "normal"

True, the normal line height depends on different browsers.