No more clamp() magic numbers

👉 Start writing CSS with confidence: https://thecascade.dev/courses/css-demystified/?utm_source=youtube&utm_medium=social&utm_campaign=regular-video 🔗 Links ✅ Give Matthew Morete a follow (thanks Matthew!): https://matthewmorete.com/ - https://bsky.app/profile/matthewmorete.com ✅ Utopia: https://utopia.fyi/ ✅ More on progress() on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/progress Fluid type with clamp() means magic numbers you have to work out every time. The new CSS progress() function makes it predictable and readable, type scales included, and the tan(atan2()) trick lets you use the same approach today in every browser. ✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter 💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK ⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co 🎓 Start writing CSS with confidence with CSS Demystified: https://cssdemystified.com 🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/ --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell 💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join --- 🧑‍💻 My editors: In most videos, I’m using CodePen these days: https://codepen.io/ - with High Contrast Dark theme and the font Commit Mono And if not CodePen, then I’m probably using Zed: https://zed.dev/ with the theme Ayu Dark, and the font ZedMono In older videos, I was using VS Code - https://code.visualstudio.com/ with the theme One Dark Pro Var, and the font Cascadia --- ⌚ Timestamps: 0:00 - The problem with clamp() 0:42 - Why clamp() type scales fall out of sync 1:51 - How progress() works 3:43 - Making it more readable 4:51 - Switching to rem 5:37 - Fluid type scales with progress() 7:31 - Cleaning up the type scale math 8:57 - Using it today: browser support 10:16 - The tan(atan2()) fallback 11:20 - Why this beats a generator 12:42 - Specific font sizes (no type scale) 13:34 - Wrapping up --- 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: Bluesky: https://bsky.app/profile/kevinpowell.co Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And whatever you