How to Calculate Unitless Line-Heights with Sass

A couple of weeks ago I was working on a project and I realized the designer had wanted a specific `line-height` for a few different headlines. So how do we go from a pixel value (like 22px) to a unitless value (like 1.45)? It's actually pretty simple with Sass.

A couple of weeks ago I was working on a project and I realized the designer had wanted a specific line-heights for various headlines. Now line-height is a pretty simple CSS property, you can use any unit type you want: pixels, ems, rems, percentage or you can go unitless. Now, while you can use any unit type you want, the question becomes whats the best and why?

Let's take a quick look at an example:


.headline {
    font-size: 32px;
    line-height: 36px;
}

.headline .subhead {
    font-size: 12px;
    // line height here is inherited as 36px
}    

So in this example we're dealing with a cascade issue. The line-height for .subhead wasn't set so it'll inherit the parents height of 36px and that'll be pretty spaced out. Check out this fiddle to see what I'm talking about.

So using a number with a hard pixel number set just means you're going to have to update the children too, or, we can remove the unit altogether and just let the browser do the math for us:


.headline {
    font-size: 32px;
    line-height: 1.2;  // line height gets calculated as (32 * 1.2) => 38.4px
}

.headline .subheadline {
    font-size: 14px;
    // line height gets calculated as (14 * 1.2) => 16.8px
}

As you can see in this fiddle the line-height is much better. So what's going on here? Well, browsers what browsers do is they take that unitless number and just multiply it with the font and call the resulting number the line-height. So the resulting numbers are more in-line with the size of the font itself. Really, this is what you're going to want to use everywhere in your code.

Except...

Well okay there's a slight hitch, Photoshop. Chances are if you're working with a designer they're using a program like Photoshop or Sketch or Illustrator to generate the design and those programs will work off of fixed pixels for sizing. This means that when you're looking at the design and trying to figure out the line-heights it'll say something like 32px not 1.3. Bummer, now we need to do math if we're going to calculate the correct line-height of different elements, and that can get tedious.

Sass Function FTW

This was the place I was at a couple of weeks ago, I had some very specific line-heights and I want a function that is repeatable so I don't make stupid mistakes.

So this is what I came up with:


.headline {
    font-size: 32px;
    line-height: get-line-height(22px, 32px); // this outputs: line-height: 1.4545
}

Boom. Now I don't need to do math every time I need to adjust the line-height of something and I'll always have a unitless number.

So how does this work exactly? Let's take a look at the function itself:


@function get-line-height($font-size, $line-height) {
   @return $line-height / $font-size;
}  

A nice simple one-liner, I love functions like this! All you need to do is take the pixel based line-height and divide it by the pixel font-size and you're going to get the right unitless number.

If you want to see the whole thing working, you can check it out over on SassMeister.

Conclusion

I love little one-line functions like this, it saves me a bunch of time because I now don't have to think about these values anymore, I don't have use something like PerfectPixel to try and match heights, and my designers are happy because I'm paying attention to the little details. Really, that may be the most important part of this whole function, just showing that you care enough to really match the design as intended.

If you have any feedback feel free to hit me up on Twitter.