How Does Line-Height Actually Work?

This post will take 1 minute to read.

The CSS prop­erty line-height seems pretty straight­for­ward, but the way that it renders can cause some con­fu­sion when work­ing out a typo­graph­ic baseline. Here is an example of a 24px baseline (I am using pixels for sim­pli­city, but I would gen­er­ally use ems). Optically, it looks great, but let’s add a hori­zont­al grid so that we can see exactly what is going on. I’m going to align the grid to the bot­tom of the h1; everything else should then line up accord­ingly. Here is the res­ult.

Uh oh, what happened? We can imme­di­ately see that the baseline doesn’t line up, des­pite hav­ing used a con­sist­ent line-height and margin-bottom. How can this be? Well actu­ally, this is expec­ted beha­vi­or.

Here’s the catch: a baseline on the web is not cal­cu­lated in the same man­ner as a print baseline. The dis­tance between lines of type in print is referred to as lead­ing, and while this concept is used in CSS, it is not imple­men­ted in the same man­ner.

CSS uses what is known as half-lead­ing to render lines of text. This is determ­ined by work­ing out the dif­fer­ence between the line-height and the font-size, divid­ing by 2, and then pla­cing the cal­cu­lated amount of space above and below each line of text. So if you have a font-size of 16px and an effect­ive line-height of 24px, the half-lead­ing would be 4px. Here’s the pro­cess:

Understanding how line-height actu­ally works was a real eye-open­er for me. It can be a dif­fi­cult concept to explain, but it becomes pretty obvi­ous once you see it. So, if you’re any­thing like me (par­tic­u­lar about baselines), you can now get on with your work and stop wor­ry­ing about using magic num­bers to get everything per­fectly aligned.

That’s a great ques­tion, Pankaj, I might make that clear­er in the art­icle. The line-height first needs to be cal­cu­lated. Then, using that value, the rest is worked out. So if you have font-size: 16px; and line-height: 1.5; then the effect­ive line-height is 24px.

The prin­ciple is essen­tially the same. If you have line-height: 1.5; for example it will mul­tiply the font-size by this scale, cal­cu­late the dif­fer­ence between the two, then apply it to top and bot­tom. So it would be 0.25 white space above and below. Correct me if I’m wrong!

Thank you for post­ing this! I found the concept of baselines to be very con­fus­ing, and that has put me off learn­ing how to use them. This art­icle has made it a lot clear­er — you’ve giv­en me a start­ing point, thank you.

This is great for for the 16/24, but how did you fig­ure that the font size inter­val was 16,16,18,21,24,36,48 for p,h6-h1? Where they picked at ran­dom? I know they’re not, but could you shed some light on that meth­od?