How Does Line-Height Actually Work?

How Does Line-Height Actually Work?

This post will take 1 minute to read.

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 line-height and 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 font-size of 16px and an effective line-height of 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.

Understanding how 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.

Tweet this

21 Comments

  1. Pankaj Parashar

    Interesting article.

    How does the ‘half-leading’ concept works, when we provide ‘line-height’ in percentage(%) or pure number, like, line-height:1.5?

    I believe in the latter case, the ‘line-height’ is determined by multiplying this number with the font-size.

  2. Josh

    That’s a great question, Pankaj, I might make that clearer in the article. The line-height first needs to be calculated. Then, using that value, the rest is worked out. So if you have font-size: 16px; and line-height: 1.5; then the effective line-height is 24px.

  3. Marky Mark

    Yo guys, this got me reading. Great topic. The answer to your question Pankaj can be found here: http://www.dev-archive.net/articles/line-height.html

    The principle is essentially the same. If you have line-height: 1.5; for example it will multiply the font-size by this scale, calculate the difference between the two, then apply it to top and bottom. 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 explanation. I can very well figure out myself how this works in case of percentage.

    One last question – Why don’t you have a tweet button 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 button; it’s fairly unobtrusive. Thanks!

  6. Vinci

    I am not sure if I understand the line-height calculation for em sizing.

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

    How do you calculate the line-height on the em-sized elements? (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 posting this! I found the concept of baselines to be very confusing, and that has put me off learning how to use them. This article has made it a lot clearer – you’ve given me a starting point, thank you.

  9. Josh

    No worries, Helen. I’m glad it made sense! If you ever have any questions, feel free to ask.

  10. John Nguyen

    This is great for for the 16/24, but how did you figure that the font size interval was 16,16,18,21,24,36,48 for p,h6-h1? Where they picked at random? 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 understanding of line-height.

  12. Josh

    I haven’t had that experience, Valery. Would you mind providing some evidence?