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.

Bookmark this article with:

 •    •    •