Don't Use a Fixed Line Height

[AleksandrHovhannisyan]

No description provided.

[iam-yan]

Thanks for the article! @AleksandrHovhannisyan

However, I cannot understand the difference between absolute LH and relative LH. Furthermore, I actually prefer the absolute value, although I kept seeing people recommending the unit-less approach.

Here are the reasons:

1. After all, the design decision of line height is based on the font size. "20px, 24px" and "20px, 1.2" are just 2 notations. Using the former won't stop you from assigning different line height for different font size scales, while using the latter won't promote it.
2. By using absolute values, I feel life would be easier when working with a grid system.

What do you think?
Please let me know if I have missed something important. : )

[AleksandrHovhannisyan]

This is a really good question! And I think you're right. Practically speaking, there's no difference between unitless line height and absolute line height since you get the same result either way, and you'll have to change the unitless line height for each font size anyway. Absolute values are definitely easier to reason about.

I would probably use rems for font size and line height so that both of them scale when the user changes their font size preferences. So probably 2rem, 2.4rem in your example.

while using the latter won't promote it

Right, exactly. Unitless line height creates the false illusion that your line height will scale well for all font sizes, but we saw that this isn't the case since it leads to exaggerated spacing at very large font sizes. If you end up having to change the line height at every step anyway, then you may as well just use absolute line heights in the first place.

When I have time, I may go back and update the post to clarify this a bit better.

[iam-yan]

Thanks for your reply. Yes rem would be a good approach. And this is when unit-less would beat px. However I think 2rem, 2.4rem would still be the winner because of the same benefit: a better dev experience.

Actually I was always feeling confused about this problem because unit-less is advocated everywhere. The post and the conversation really helps!

Let me know once you updated your post. : )

[AleksandrHovhannisyan]

@iam-yan Done! See this new section: Absolute vs. Unitless Line Height: Which Should You Use?. I also updated the code samples and my site's own CSS.

[iam-yan]

Good job~
Thanks. : )