📝 CSS-Tricks 212: A note about clamp()

View this newsletter on the web.

[Robin]: This week I want to take a closer look at the min(), max(), and clamp() functions. I keep hearing things about them but I’ve never used them in production and although these are relatively new features they have pretty dang good browser support at this point so it’s useful to jump in now.

First up: the min() function picks the smallest of the values you pass into it. So, if we were to write something like this:

div { width: min(700px, 80%); }

This div will then be 700px if that value is smaller than 80%. The other way to think about this is it’s really the same as writing this:

div { width: 80%; max-width: 700px; }

For some reason this one line of CSS makes my mind boggle. But likewise, max() does the opposite of this. So if we were to write:

div { width: max(700px, 80%); }

Then whichever of these two values is biggest, that’s the value the function will pick. Or you could write that like this:

div { width: 80%; min-width: 500px; }

So it might be useful to see these functions as a short hand for setting min-width and max-width. Except, you don’t have to set these functions on width, you can use these pretty much anywhere you want.

Now what about clamp()? Well, it takes three values: min, max, and preferred value. A popular usage is with font-size:

body { font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem); }

Translation: “I want the text size to be a minimum of 1.1rem and a maximum of 2.5rem. Attempt to size the type with a fluid calculation of 1.1rem plus 1% of the viewport size, but cap it at 2.5rem on the high end and 1.1rem on the low end.” And that looks something like this:

This GIF uses 4vw as the ideal calculation, but for accessibility try to avoid that and factor in a relative unit for all the values of clamp(), like the 1vw + 1.1rem middle parameter of the above code example.

(We cover this in Simplified Fluid Typography.)

This instructs the browser to change the font-size depending on the width of the viewport but also, crucially, it allows us to have a min font size for legibility. This is fantastic because we get so much more control over font-size for design reasons, too. Say I want a different set of typographic relationships on smaller screens than I do on larger ones. With clamp() we can do just that.

I have a feeling that these functions are probably going to be used in a ton of places besides just setting font-size and width but even if that’s not the case—clamp() especially gives us this new typographic superpower that we’ve never really had before. And that’s darn exciting.

Also, on this note, Kevin Powell goes into a lot more depth in his video about these functions. There’s a lot of nuance that I’m skipping over so before you use them then it’s definitely worth checking out Kevin’s video.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s