Responsive Typography with CSS Clamp

Today we're going to learn how we can use the CSS clamp function to create responsive, fluid typography!
📚 Project Links
code: github.com/TomIsLoading/fluid...
🔗 My Links
GitHub: github.com/TomIsLoading
Twitter: / tomisloading
Instagram: / tomisloading
TikTok: / tomisloading

[@chrisicotec7652]

i was always confsed as to how clamp worked, but i found this channel, now it all makes sense .... you got a new sub

[@adityarajgor6763]

Best video so far

[@markoseovac3185]

Interesting new thing, thank you 🤙

[@user-lc2cb8io6w]

thanks for this.

[@victoradeniji4554]

Awesome video. Thank you so much.

[@tomisloading]

Happy to help! :)

[@thexpand]

Great video. I have a few suggestions, though - it would be better to use 1rem + 8vw for the second argument of the clamp function to be able to scale the text depending on browser zoom or user preferences for font size. Also, the same goes for using rems instead of pixels (in your case 50px and 100px would probably be best replaced with non-fixed values).

[@AlThePal78]

it is a very good video one of my favorites

[@tomisloading]

Thank you!

[@dileepbatchala1590]

If it is single line clamp function is ok, but when the text is in multiple lines what about the line height? It should also change accordingly.

[@OCEMTechZone]

Great 🎉

[@dileepbatchala1590]

Brother what about the line height?

[@rg-web-design]

I wonder if there is a way to create a 'reverse clamp' for vw? On a desktop, I might want the website logo to be 10vw but on mobile I'd want it 20vw. I haven't found any solution as yet.

[@juanortegaa6916]

Did you take this from Kevin Powell ??

[@sanjeevd6872]

Font clamp not working for samsung galaxy mobiles

[@benburakk]

which using vs cde theme?

[@tomisloading]

Andromeda!

[@seancarlopiodo2685]

Can I use clamp and media query at the same time?

[@tomisloading]

Definitely! :)

[@sanjeevd6872]

Font clamp size not working different devices pls tell the solution sir .....

[@scottonanski4173]

Okay, great! Now use this in a real-world development example where you have 3 monitor sizes; 1920 x 1080, 3840 x 1600, and 5120 x 2800. Use this on containers, headers, footers, etc. It's not as easy are you making it out to be.

[@darkman237]

stupid question: this will work for any font?

[@oliseoseji8868]

yes and not just font

[@darkman237]

@@oliseoseji8868I wasn't able to get it to work on firefox, latest version.

[@vikashpatel1204]

Wasting too much of time in video instead ( Get inspired from @Fireship )