The CSS property
line-height seems pretty straightforward, but the way that it renders can cause some confusion when working out a typographic baseline. Here is an example of a
24px baseline (I am using pixels for simplicity, but I would generally use ems). Optically, it looks great, but let’s add a horizontal grid so that we can see exactly what is going on. I’m going to align the grid to the bottom of the
h1; everything else should then line up accordingly. Here is the result.
Uh oh, what happened? We can immediately see that the baseline doesn’t line up, despite having used a consistent
margin-bottom. How can this be? Well actually, this is expected behavior.
Here’s the catch: a baseline on the web is not calculated in the same manner as a print baseline. The distance between lines of type in print is referred to as leading, and while this concept is used in CSS, it is not implemented in the same manner.
CSS uses what is known as half-leading to render lines of text. This is determined by working out the difference between the
line-height and the
font-size, dividing by 2, and then placing the calculated amount of space above and below each line of text. So if you have a
16px and an effective
24px, the half-leading would be
4px. Here’s the process:
24px − 16px = 8px
8px ÷ 2 = 4px
So with that information, let’s have a look at how our baseline grid actually renders. Keep in mind that I haven’t changed the baseline at all, I have only moved the position of the grid.
line-height actually works was a real eye-opener for me. It can be a difficult concept to explain, but it becomes pretty obvious once you see it. So, if you’re anything like me (particular about baselines), you can now get on with your work and stop worrying about using magic numbers to get everything perfectly aligned.
For those of you that would rather use
ems, here is an updated baseline.