Responsive Typography with CSS Clamp

Рет қаралды 48,814

Күн бұрын

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

Пікірлер: 34

@dzsuvi 16 күн бұрын

Never used clamp before because I didn't understand how it work. I do now. You've got a new sub! Thanks

@elAmigo805 Күн бұрын

Awsome, this solves an issue I was having. Thanks

@chrisicotec7652 4 ай бұрын

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

@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).

@scottonanski4173 4 ай бұрын

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.

@koresaliva 2 ай бұрын

Extremely helpful thank you!

@mikhaillav Ай бұрын

Thank you so much! Really helpful ✌️

@johan.svensson 2 ай бұрын

Great tutorial. Thank you.

@ClarkeDesign 28 күн бұрын

Should you not be using rem or em instead of px for the max and min sizes?

@ooomb6439 24 күн бұрын

thankyouu bro you got a sub

@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.

@adityarajgor6763 Жыл бұрын

Best video so far

@victoradeniji4554 7 ай бұрын

Awesome video. Thank you so much.

@tomisloading 7 ай бұрын

Happy to help! :)

@markoseovac3185 Жыл бұрын

Interesting new thing, thank you 🤙

@magatsu82 8 күн бұрын

Try to zoom in or out now.... font will remain the same size, don't use vw alone and px are not a good way to set font sizes, use rem or em

@user-lc2cb8io6w 6 ай бұрын

thanks for this.

@juanortegaa6916 Жыл бұрын

Did you take this from Kevin Powell ??

@AlThePal78 11 ай бұрын

it is a very good video one of my favorites

@tomisloading 11 ай бұрын

Thank you!

@rg-web-design 4 ай бұрын

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.