State of the Browser

State of the browser is back for the 10th year! Join us in London or online on

Get tickets →

Quick Tip: You Might Not Need Calc()

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.