Responsive Titles And More With Min, Max, And Clamp
June 01, 2020
With all the hype that surrounds the newest changes in JavaScript these days CSS can sometimes get overshadowed, but there have actually been quite a lot of advancements to CSS too. One that I’m excited to use more of is the min
, max
, and clamp
functions. They work similarly to calc
but enable even more uses (speaking of which, calc
is awesome but I’ve seen a lot of people who haven’t used it before or very much, so if that sounds like you I definitely recommend you look into it).
I’ve only played around with the new functions a little so far so I’m sure I’ll keep finding new use cases for them. The first thing that came to mind for me was responsive titles. Lets say you want a title to take up the full width of the main content area; so as the browser window grows or shrinks the font size of the title increases or decreases with it. You don’t want it getting too large or small though because that would look bad or even become unreadable. In the old days this kind of thing could only be accomplished by JavaScript. More recently you could use media queries, but that could get verbose. Now with CSS math functions you can pull this off with just a single clamp
declaration. To understand clamp
though you first need to understand min
and max
.
Min & Max
min
allows you to give two values and the browser will pick the smallest one, while max
tells the browser to pick the larger of the two. You can use any type of numerical value like px
, rem
, vw
, or percents; and the function can be applied to any property that normally would expect that kind of value like width
, font-size
, or even inside other functions like a gradient in background-image
.
So let’s say you have the following code.
.title {
font-size: max(22px, 2.5vw);
width: min(40%, 400px);
}
The font size would either be 22px
or 2.5vw
, whichever is bigger. Since the second value is relative to the viewport’s width that means 22px
will be used on smaller screens but when the viewport gets wide enough 2.5vw
will be used instead.
For the width
property we’re using min
, so it will be the smaller of the two values that gets used. This is equivalent to using min-width
.
.title {
font-size: max(22px, 2.5vw);
width: 400px;
min-width: 40%;
}
Clamp
So back to clamp
. This allows us to specifically set both a minimum and a maximum as well as how the element should transition between the two. The function accepts three arguments which must go in the correct order: the minimum value, the preferred value, and finally the maximum value.
.title {
font-size: clamp(18px, 5vw, 45px);
}
Here the title’s size will be 5vw
unless that number goes below 18px
or above 45px
, at which point it would stop there. This is the effect we’re looking for to get responsive titles. The larger title would look good on larger screens but would be overwhelming on mobile. clamp
allows us to base the font’s size off the screen’s width without it ever getting excessively large or small.
Extending This To All Your Text
You could have all you’re text work like this if you’re using rem
units. In the past you would have needed a media query to change the base font size at a particular screen width. Now you can just use clamp
to do it in one line.
body {
font-size: clamp(14px, 2vw, 18px);
}
h1 {
font-size: 2rem;
}
It’s extra important to make sure that whenever you’re dynamically setting a font size you never let it get too small or it could become an accessibility issue. That’s why we’re using clamp
here instead of min
.
Browser support
All the major browsers except IE support min
, max
, and clamp
. If you’re supporting IE you’ll need to provide a fallback. This may be very simple or too redundant to be worth it depending on what you’re trying to accomplish.