This article was originally published in the DEV Community.
Here's a neat little trick:
You can use the
clamp() CSS function to make
font-size responsive and fluid!
It works by "clamping", or restricting, a flexible value between a minimum and a maximum range.
Here's how to use it:
- Choose a minimum value: E.g.
- Choose a maximum value: E.g.
- Choose a flexible value: E.g.
font-size: clamp(16px, 5vw, 34px);
In this example, the
font-size value will be
5% of the viewport width. But only if that value is bigger than
16px and smaller than
For instance, if your viewport width is
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
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!
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:
I love modern CSS. What are your thoughts on
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 😄
Hey, let's connect 👋 #
Follow me on Twitter and let me know you liked this article!
And if you really liked it, make sure to share it with your friends, that'll help me a lot 😄