I think I figured out how to create responsive type scales with composable CSS utilities, thet lets you scale linearly between exact pixel values (this is important if you want to align exactly with a type scale, rather than just scale type on a case-by-case basis) 🧵

I've summarized the technique at length here but here's a quick breakdown of the problem and solution. I've always assumed that this has been impossible to pull off, since you currently can't divide a pixel value with another pixel value using CSS calc()

This calc() restriction is going to be relaxed in the css-values-4 spec ( but for the time being, that's the restriction we're dealing with. How do we then divide, for example, the current viewport width with the maximum viewport width, to know how far...

we are between two viewport sizes, so that we can scale a font size accordingly? Since we currently can't convert pixel numbers to unit-less numbers, we have to go the other direction → convert unit-less numbers to pixels. We can define all of our variables without units:

…and then convert them to pixel values by multiplying them with 1px when we need them as pixel values. We can then "unlock" the calculation that at first hand can seem impossible to perform with the current restrictions:

Then we can set new variable values with utility classes, to create composable type scales:

The demo in the first tweet is then created by combining these classes:

Again, all the details are here: significant limitation of this technique right now is that we can't use rems (this only works with pixels), but that should be resolved with the relaxed CSS calc() specs 👀

Just an FYI, in case you run into this edge case on Safari text reflow (gave me a lot of headache)

Oh dear, that’s why!

omg this is AMAZING