CSS Leading vs. Line Height

Typography includes a concept known as "leading"—the space between lines of text. More precisely, it's the space measured from the baseline of one line to the baseline of the next.

Increasing the leading of a paragraph should not move the first line of text down. This logical expectation doesn't hold in CSS.

CSS uses the line-height property instead of a dedicated leading property. When you change its value, the layout of the first line shifts. This effect is often subtle and easily overlooked. Because the line-height property changes the height of the line's bounding box, the space above the first line also changes.

This behavior becomes critical in pixel-perfect designs where single lines of text—such as those in buttons and other components—are affected by line height. It causes misalignment, with text not vertically centered within its container.

I've developed workarounds for this CSS quirk, but a dedicated leading property would improve my styling workflow. It would eliminate the need for negative margins and line-height overrides—a significant improvement for precise typography control.