Fluid design using clamp
I came across css clamp function today while browsing MDN.
:root {
font-size: clamp(1rem, 0.5rem + 1vw, 3rem);
}clamp() function takes three parameters : minimum value, preferred value, and maximum value. The major benefit of this method is that we can avoid media queries and acheive Fluid Typography in a single line of code.
Here, we are using rem and vw units together to ensure font size scale according to browser zoom setting, user font size preference, and screen width.
I especially don't enjoy the abrupt change that media queries bring. This approach produces a much smoother experience to the user.
Can I use website suggests that iOS safari got clamp support recently and some browsers still don't support it.
For a wider browser support, we can use min and max functions. The difference is 66% to 82% of global browser usage.
:root {
font-size: max(1rem, min(0.5rem + 1vw, 3rem));
font-size: clamp(1rem, 0.5rem + 1vw, 3rem);
}