Want to create a responsive font size (X on mobile, Y on desktop, X to Y in between) with only one line of code and no media queries? With clamp this is possible.

With this option in CSS, three values are used: minimum value, preferred value, and maximum value.

In our case, this means that the font size will be neither smaller than the minimum value nor larger than the maximum value.

The main advantage

In my opinion, the best part of using the clamp option is the dynamic increase in font size.

With media queries, the font size “jumps” from one value to another. But with clamp, the font size continuously increases from the minimum value to the maximum value based on the width of the viewport.

Let’s say we want the font size of .large-text to be 2rem on mobile and 4rem on desktop (for example, 1080px and above).

With the media queries method, we would write something like:

.large-text {
	font-size: 2rem;
}

@media (min-width: 1080px) {
	.large-text {
		font-size: 4rem;
	}
}

The downside of using this method (along with too many lines of code) is that the font size will remain the same 2rem even at 1079px.

Users with a 912px wide tablet, and users with a 414px wide mobile device - will all get the same font size of 2rem.

The size will be changed at once from 2rem to 4rem only at 1080px.

With clamp, however, we can set a range of pixels in which the font size gradually changes from the minimum value to the maximum value as the width of the viewport changes.

Suppose we want this range to be between 480px and 1080px.

This means that any width smaller than 480px will always get the 2rem font size (minimum value). Any width greater than 1080px will always get the 4rem font size (maximum value). And in the range of 480px to 1080px the font size will increase dynamically from 2rem to 4rem!

This makes the whole product much more responsive, and therefore probably improves the user experience.

So how can this be done?

Instead of manually doing some math, you can easily get the right values to use in clamp with free online tools. Alternatively, you can create an SCSS function that will automatically generate the correct values for you.

For this demo, I will use an online tool like this one.

So if we look at the example from earlier, we would like to get the values for a font size that increases from 2rem to 4rem as the width of the viewport increases from 480px to 1080px.

For that:

  1. Open the font-size clamp generator.
  2. Enter 480px as the minimum viewport width.
  3. Enter 1080px as the maximum viewport width.
  4. Enter 2rem as the minimum font size.
  5. Enter 4rem as the maximum font size.
  6. Copy the generated font size which in this case will be: font-size: clamp(2rem, 0.4rem + 5.3333vw, 4rem);.
  7. Use it in your CSS/SCSS, for instance like this:
.large-text {
	font-size: clamp(2rem, 0.4rem + 5.3333vw, 4rem);
}

It’s that simple!