TIP - Make your font responsive without media-queries Part II

After released the Tip to make your font responsive without media-queries, I was talking with my good friend @tonyioi, and he said: - Rubèn, I liked your post. It came into the right moment to apply it to my aside project thunderhub. But, What if the user has a huge wide-screen? or what about 4k? Isn't that to be then too big for the automatic responsive font?

He got a point there, my solution is scaling based on the screen, but I never defined a maximum, or minimum. And here's the second part of the TIP, to show you how to apply boundaries on the previous solution.

Let's catch again the previous snippet:

.my-title {
  font-size: calc(1.8rem + 1vw);
}

 

Quick reminder: The 1.8rem is just a number I came up, you can introduce any number that you like here.

What happens if you got a 3840 × 2160 resolution screen? 1vw will be 38.40 px, and with the addition of 1.8rem(based on 16px as font-based it turns as 28.8px) then we have a responsive font that is 67.2px 😂😅.

Min() and Max()

CSS math functions to the rescue! These 2 methods support almost all browsers (I am sorry IE). What do they do?

The min() CSS function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value - MDN docs

As example, if I do min(20px, 1em, 10vw). What will happen is that I will always take the smaller number based on the metrics I added. In my example, I went for 20px, 1em, and 10vw. But you can add as many options as you want. See it as an array of values to measure, it will always return the lowest number. So if 1em means 16px, based on the properties from my parent element, then 1 em will be taken over 20px. If 10vw (10% of the screen) is translated into less than 20px and 1 em, then that will be taken. For my example, I can do:

.my-title {
  font-size: min(calc(1.8rem + 1vw), 40px);
}

 

Now, if my calculation overpasses at some point the 40px, the min value will be 40 itself, and is the one to show.
Check it out in this super simple code-sandbox

For max() is the same but taking the largest number in the array. So with max, I can specify, at least, a minimum value to show:

.my-title {
  font-size: min(max(30px, calc(1.8rem + 1vw)), 40px);
}

 

So the max is taking the max between 30 and the automatically computed value (I am making sure that at least it will be always 30), and then with the min, I am taking care that the value has to be always under the 40px, since we always want the minimum there.

Cheatsheet:

.my-title {
  font-size: min(max(minValue, DesiredValue), MaxValue);
}

 

And with this trick, I hope you hate a bit less CSS and you start to like it a bit more 🥰.

Clamp()

Clamp function is exactly the combination of min() and max() into a single function, instead of wrapping 2 together. So our previous example becomes as:

.my-title {
  font-size: clamp(30px, calc(1.8rem + 1vw), 40px);
}

 

Much cleaner than before. The unique downside is that this method is pretty new for most of the browsers, and doesn't provide so much compatibility. I am pretty sure this is going to be standard in a while, but for now, in my opinion, it's safer the min() max() combination.

Let me know in my twitter if you are enjoying this series of TIPS, so I can know if I should keep doing it or focus more on a full article approach.

Thanks!

See the original post at my blog suetBabySuet