Working with responsive typography can get a bit complicated for some developers. There are various ways to make typography responsive, such as setting up
font-size with viewport-unit, use media query, use CSS
But, did you know that CSS growing rapidly? Now, we can create responsive typography by only writing 1 line of CSS code!
CSS clamp() #
I believe most of you are not familiar with this CSS function, but according to Caniuse, all major browser is already support it, so you can safely use it on production.
So, what is CSS
Based on the article on MDN, The
clamp CSS function clamps a value between an upper and lower bound.
clamp enables selecting a middle value within a range of values between a defined minimum and maximum.
clamp takes three parameters: a minimum value, a preferred value, and a maximum allowed value, for example:
font-size: clamp(16px, 5vw, 36px);
clamp(MIN, VAL, MAX)
minis the minimum value
valis the preferred value
maxis the maximum value
Lets breakdowns the code above. So, the value of
.clamp is 5% of the viewport width because
5vw will resolve to 5% of the current viewport width, but it will not go higher than
36px or lower than
So, lets say your current viewport width is
1280px, the value of
5vw will be
64px, we get that from
1280 * 5%, but remember, we already set the maximum value to
36px, so the result of your current viewport width is
If you want to try it yourself, you can play around with this pen.
One more thing, you can use
clamp with another properties such as
height, etc. If you want to learn more about this superpower CSS function, you can go to https://developer.mozilla.org/en-US/docs/Web/CSS/clamp.