Did you know, if you use CSS math functions like min(), max() and clamp() and you’re calculating any one of the arguments, you don’t need calc()? I think it was Ahmad Shadeed who mentioned this on Twitter the other day, but I could be wrong.
So if you want to use clamp() for some fluid typography, say, with a calc() function for the middle value, instead of doing this:
h1 {
font-size: clamp(1.5rem, calc(1rem + 3vw), 4rem);
}You can do this:
h1 {
font-size: clamp(1.5rem, 1rem + 3vw, 4rem);
}It totally makes sense, because min(), max() and clamp() already are math functions. But nonetheless, it’s something I wasn’t aware of before!
It works with custom properties too — check out this demo.
Incidentally, if you want to know more about fluid typography in CSS (including accessibility concerns), this comprehensive guide by Adrian Bece has you covered.