Musings on line-height: normal

We all know that CSS has its quirks, but Eric Meyer, author of Cascading Style Sheets: The Definitive Guide, has vented some frustration in an extraordinarily long treatise on the line-height property. It turns out line layout is messed up.


"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."


line-height sets the distance between lines of text, and can also be used in some tricks for vertical centering of text and sizing of block elements. The normal value is default and "sets a reasonable distance between lines."


Eric has provided the readers with a JavaScript-powered test file, here readers can pick from a list of fonts and see what happens at different sizes. For that and much more on the behavior of this CSS property, read line-height: abnormal.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Lines and paragraphs break automatically.
  • Flash can be added to this post.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options

To prevent automated spam submissions leave this field empty.