SASS function for calculating line height without unit

This post shows you a SASS function, which calculates a line height without a unit. Origin of this action was that I no longer wanted to use rem.

What is the problem with rem?

Until recently I always used rem as the unit for line height and font size. Then I read the article »Responsive sizing with em-based design« by Keith J. Grant in the net magazine, which gave me a solution for a problem I had at this moment:

  • All font sizes are set with rem.
  • The sidebar should have a smaller font size.
  • I need to reset the font size of the sidebar elements with em.

His proposal is to use em and set the font size with rem on the top level of each component. With that, you can, for example, adjust the font size and spaces of the sidebar with changing the rem size of the .sidebar.

What does that all have to do with the line height? 🤔

Good question. I searched a while to find out if em is the right unit for line-height, and found an answer on Stack Overflow, which — among other things — says this:

»For example, if an inner element has twice the font size of its parent, then the inherited value 1.2 means that 1.2 times its own font size is used, which is OK. But if the parent had line-height: 1.2em, then the child would inherit a value that 1.2 times the parent’s font size – which is much smaller than its own font size.«

Part of the answer from Jukka K. Korpela to the question »EM’s for line-height« on Stack Overflow.

In short: Use line heights without unit.

Problem with line height without unit and solution

Like said, I already had created everything with rem. Now I wanted to convert the rem line heights into values without unit, and that was not so simple — the calculation for that is slightly more complicated than for rem or em

The result of my considerations is the following SASS function:

@function line-height($font-size, $ratio-to-base-line-height, $base-line-height: $line-height, $relative-base-font-size: 1) {
    $abs-base-font-size: $relative-base-font-size * 16;
    $line-height: $base-line-height * $ratio-to-base-line-height;
    @return ($relative-base-font-size * $abs-base-font-size * $line-height) / ($font-size * $abs-font-size);
}

You pass the element’s font size, the ratio of the wanted line height to the base line height, the base line height, and the relative base font size (default is 1) to the function. The function calculates the line height without a unit and returns it.

Example

That is our starting point:

h1 {
    font-size: 1.802em;
    line-height: 2.1rem;
}

The line height of the html element is 1.4rem, so we want the h1 element to have a line height which is one and a half time so large.

Using the functions, that looks like this:

h1 {
    font-size: 1.802em;
    line-height: line-height(1.802, 1.5, 1.4); /* returns 1.24861 */
}

So we get the corresponding value without a unit and can be happy about a more flexible line height. 🎉

Related posts

Leave a Comment

Your email address will not be published. Required fields are marked *