Start writing CSS with confidence with my course CSS Demystified: https://cssdemystified.com

When people find out about viewport units, one of the first things they often do with them is create fluid type, but there are some problems that can cause. In this video, I look at why we shouldn’t use viewport units for our font sizes, how we can use clamp(), and how using a tool like Utopia makes figuring it all out a lot easier.

🔗 Links
✅ Utopia: https://utopia.fyi

⌚ Timestamps
00:00 - Introduction
00:21 - Why you shouldn’t use viewport units for font-size
02:00 - Using clamp()
04:00 - Using viewport units is hard to get right
04:50 - Utopia’s type size calculator
08:00 - Writing CSS with confidence
08:48 - A bit more on Utopia

#css

--

Come hang out with other dev's in my Discord Community
💬 https://discord.gg/nTYCvrK

Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcss

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
📽️ Join as a channel member: https://youtube.com/@kevinpowell/join
💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:
https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join

---

My editor: VS Code - https://code.visualstudio.com/

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Kevin Powell

Using viewport units for font sizes might seem like a good idea for responsive text, but it can lead to significant issues such as excessively small or large text and failures in accessibility criteria. Instead, using the CSS clamp function offers a more effective solution, allowing text to grow and shrink appropriately within defined limits. Tools like utopia.fyi can help set appropriate font sizes and scales for flexible, responsive typography.

Please, don’t use viewport units for font sizes

<p>Yeah that totally sounds like an accessibility nightmare 😬
Not a good unit for font size 💯</p>
