@KevinPowell
  @KevinPowell
Kevin Powell | Please, don’t use viewport units for font sizes @KevinPowell | Uploaded October 2024 | Updated October 2024, 4 hours ago.
Start writing CSS with confidence with my course CSS Demystified: 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
πŸ’¬ discord.gg/nTYCvrK

Keep up to date with everything I'm up to
βœ‰ kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
πŸ“Ί twitch.tv/kevinpowellcss

---

Help support my channel
πŸ‘¨β€πŸŽ“ Get a course: kevinpowell.co/courses
πŸ‘• Buy a shirt: teespring.com/stores/making-the-internet-awesome
πŸ“½οΈ Join as a channel member: youtube.com/@KevinPowell/join
πŸ’– Support me on Patreon: patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:
youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join

---

My editor: VS Code - 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: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
Please, don’t use viewport units for font sizesCSS border effects without using borders5 Responsive Layouts in 60 secondsCSS is getting better, but Sass is still relevantThe unknown fundamentals of CSS: Offset parents and Stacking Context explainedCreate direction-aware effects using modern CSSCSS gap is NOT a replacement for marginsTiming function tips to improve your css animationsWhy I only use vanilla HTML, CSS, and JS on YouTubeA deep dive into CSS color-mix()How I build a website from scratchI never thought of using CSS animations like this before!

Please, don’t use viewport units for font sizes @KevinPowell

SHARE TO X SHARE TO REDDIT SHARE TO FACEBOOK WALLPAPER