Live version: https://quirky-lalande-09a864.netlify.app
#Scope Trying to learn new things as clamp() for responsive font size, I'm stunned, great function!
Responsive typography has been tried in the past with a slew of methods such as media queries and CSS calc(). Here, we’re going to explore a different way to linearly scale text between a set of minimum and maximum sizes as the viewport’s width increases, with the intent of making its behavior at different screen sizes more predictable — All in a single line of CSS, thanks to clamp().
The CSS function clamp() is a heavy hitter. It’s useful for a variety of things, but it’s especially nice for typography. Here’s how it works. It takes three values:
clamp(minimum, preferred, maximum);
example clamp(1rem, 1.4rem, 1.8rem)
Reference https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
Photo preview:
