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 hadline-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.
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-base-font-size);
}
Code language: PHP (php)
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;
}
Code language: CSS (css)
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 */
}
Code language: CSS (css)
So we get the corresponding value without a unit and can be happy about a more flexible line height. ?