loading...
Cover image for Write fewer media queries with the clamp() CSS function

Write fewer media queries with the clamp() CSS function

vtrpldn profile image Vitor Paladini Updated on ・2 min read

Here's a neat little trick:

You can use the clamp() CSS function to make font-size responsive and fluid!

Gif depicting a clamp() example with font-size

It works by "clamping", or restricting, a flexible value between a minimum and a maximum range.

Here's how to use it:

  1. Choose a minimum value: E.g. 16px
  2. Choose a maximum value: E.g. 34px
  3. Choose a flexible value: E.g. 5vw
h1 {
  font-size: clamp(16px, 5vw, 34px);
}

In this example, the h1 font-size value will be 5% of the viewport width. But only if that value is bigger than 16px and smaller than 34px.

For instance, if your viewport width is 300px, your 5vw value will be equal to 15px. However, you clamped that font-size value to a minimum of 16px, so that is what is going to be.

On the other hand, if your viewport width is 1400px, you 5vw will be a whooping 70px! But luckily you clamped that maximum value to 34px, so it won't grow past that.

Oh, and it also works with padding! And margin!

Gif depicting a clamp() example with padding

And literally any other property that accepts a length, frequency, angle, time, percentage, number, or integer!

Browser support is also pretty good if you don't need to support IE/older Safari versions, look:

Browser support table

I love modern CSS. What are your thoughts on clamp()?


EDIT: Be sure to check Darshak's suggestion in the comments if you need to add an alternative implementation for older Safari!


Cover photo by Matt Artz on Unsplash

Thanks to Madza for the name of this series πŸ˜„


Posted on by:

vtrpldn profile

Vitor Paladini

@vtrpldn

A software engineer that really likes working with user interfaces. Writes mostly JS at a small (but mighty!) Danish startup. Loves cooking.

Discussion

markdown guide
 

For older browsers, we could do something like:

h1 {
  font-size: 16px;
}

@supports (font-size: clamp(16px, 5vw, 34px)) {
  h1 {
    font-size: clamp(16px, 5vw, 34px);
  }
}

This should at least work on older Safari. As for IE, well, it doesn't support @supports. :|

 

Great suggestion, Darshak! I wish I could pin comments

 

Hey Vitor, you could edit the post adding this suggestion. Makes sense to increase support with little effort.

Well, it's more a matter of graceful degradation than support increase but your idea is great, I'll do it right now!

 

Awesome! Thank you for the article and the examples. Much appreciated!

Reading this reminded me of a Github project I saw a couple months ago that allows you to clamp "a line" of text so that the same number of words stay on it regardless of font size.

github.com/tvanc/lineclamp

 

Dang, that's awesome.

It's wild seeing how CSS is evolving.

 

Yeah! My first experiences with CSS were full of floats and clearfixes so I'm glad to have modern tools like CSS functions, custom properties and Flexbox now πŸ™‚

 

Damn, this is going to forever change the way I style my content.

 

Hmmm, can this be pollyfilled in anyway?

EDIT: found a good solution to use it in older browsers via sass bronco.co.uk/our-ideas/creating-a-...

 

The tricky part is that the browser also needs to support the vw. Which our old friend IE also doesn't and never will. :(

I believe the only way to polyfill it would be by using something with JS, like fittextjs.com/

 

This is genius, never heard of clamp before now.
Thanks!

 

Thank you so much for sharing this

This will really improve my responsive designing skills

 

Damn! Some time ago I needed to implement this kind of thing. I only found JS libraries that did not meet my expectations. I wonder how would it have been with this feature :)

 

I believe you're talking about fittextjs.com, right? I also had to do something similar in the past and got super bummed out with the fact that I had to use JS for such a small thing

 

Nice article Vitor!
Must really start using this!

 

Thanks, Chris. You should, yeah! It is so simple and works so well that makes you wonder why we didn't have it before, haha

 

Woo, that's cool! Surely going to try this on my next project.

 

It's crazy how powerful these functions get when you mix them in with modern modules, too, like grid.

 

Amazing, few days ago i wrote a web page using css and html, had to add more then 6 media queries because the button and h1 positioned absolute to background pic were going down on smaller viewports πŸ‘

 
 

looks nice, but i won't use if because of the low support. Maybe in a few years