How Does Line-Height Actually Work?

How Does Line-Height Actually Work?

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­graphic 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­zontal 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 behavior.

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 manner.

CSS uses what is known as half-leading 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-leading would be 4px. Here’s the process:

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-opener 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

Comments

  1. Pankaj Parashar

    Interesting art­icle.

    How does the ‘half-leading’ 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 clearer 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 topic. The answer to your ques­tion Pankaj can be found here: http://www.dev-archive.net/articles/line-height.html

    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 percentage.

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

  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 other stuff, such as social buttons.

    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 sizing.

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

    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 earlier 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 clearer — you’ve given 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 method?

    Thanks,

  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 evidence?