Understand the mix of rem and unit-less in the new TW line-heights

[sunscreem]

I've tried searching on this but can't find the answer.

In TW2, here:

Does anyone know why the larger font-size don't use rem?

[sunscreem]

Bump - hoping someone can let me know (I've a boss very keen on TW but wants to understand it 100% before commiting)

[simonswiss]

Hey @sunscreem 👋

For the font sizes from 5xl and up, we want the line height to be the same value as the font size. When you pass a unitless value to the line-height property, it acts as a multiplier of the font size, so line-height: 1 uses the same value as the font size.

We use this to avoid having to explicitly state the font-size value when we always want it to be the same.

We didn't use unitless values for the smaller values, because it would be more complicated to come up with the math to hit a specific target rem value than using the actual rem value 😅

The line-height affects elements height, and you want the element height to be a number that’s in the spacing scale. So we don’t use values like 1.5, because otherwise you'd get weird numbers hitting outside the scale.

You could technically define all of these with numbers if you find out the exact values, nothing wrong with that.

Hope it helps!

[sunscreem]

Thank you Simon!