CSS Leading vs. Line Height

Typography has the concept what is called "leading". It is the space between lines of text. If we explain it more precisely: It is the space measured from the baseline of one line to the baseline of the next.

Now here's the gist:

If we take this definition and you increased the leading of a paragraph, would you expect the first line of text to move down? I wouldn't, would you?

Not so in CSS because it is different! CSS has the line-height property–no dedicated leading property–and if you change its value, the layout of the first line of text shifts. Often it's subtle and nobody cares. It's due to the fact that the line height property changes the height of the line's bounding box, meaning, that the space above the first line also changes. Who would have guessed that?!

Where this behavior gets important though is for pixel-perfect designs where single lines of text–as we use them in buttons and other types of components–are affected by the line height. It leads to effects like the text not being vertically centered inside the button.

I've learned to work around this idiosyncrasy of CSS line height but my styling work would be slightly better with a real leading property. It would mean: No more negative margins or line height overwriting! How great would that be!