Responsive Titles And More With Min, Max, And Clamp

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.