How Does Line-Height Actually Work?

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:

24px − 16px = 8px

8px ÷ 2 = 4px

So with that inform­a­tion, let’s have a look at how our baseline grid actu­ally renders. Keep in mind that I haven’t changed the baseline at all, I have only moved the pos­i­tion of the grid.

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.

For those of you that would rather use ems, here is an updated baseline.

Tweet this


  1. Pankaj Parashar

    Interesting art­icle.

    How does the ‘half-lead­ing’ concept works, when we provide ‘line-height’ in per­cent­age(%) or pure num­ber, like, line-height:1.5?

    I believe in the lat­ter case, the ‘line-height’ is determ­ined by mul­tiply­ing this num­ber with the font-size.

  2. Josh

    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.

  3. Marky Mark

    Yo guys, this got me read­ing. Great top­ic. The answer to your ques­tion Pankaj can be found here:

    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!

  4. Pankaj Parashar

    Excellent! That link made it more clear. Thanks Mark!

    Thanks Josh for the explan­a­tion. I can very well fig­ure out myself how this works in case of per­cent­age.

    One last ques­tion — Why don’t you have a tweet but­ton in your art­icles?

  5. Josh

    I have thought about it, but I decided that I wanted to keep the site really focused, and not bog it down with too much oth­er stuff, such as social but­tons.

    UPDATE: I went and added a Twitter share but­ton; it’s fairly unob­trus­ive. Thanks!

  6. Vinci

    I am not sure if I under­stand the line-height cal­cu­la­tion for em siz­ing.

    I am guess­ing that the mar­gin-bot­tom is obtained from margin-bottom(body) / font-size (ele­ment). For example, 1.5/3.0 = 0.5em mar­gin-bot­tom for the h1 ele­ment.

    How do you cal­cu­late the line-height on the em-sized ele­ments? (1.333 on h2 for instance.)

  7. Vinci

    Thanks Josh. I didn’t know about your earli­er post. It sure helps.

  8. Helen

    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.

  9. Josh

    No wor­ries, Helen. I’m glad it made sense! If you ever have any ques­tions, feel free to ask.

  10. John Nguyen

    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?


  11. Valery Sibikovsky

    Looks great on paper. But when you open your design in Chrome and then in Firefox you see that each browser has it’s own under­stand­ing of line-height.

  12. Josh

    I haven’t had that exper­i­ence, Valery. Would you mind provid­ing some evid­ence?