No more clamp() magic numbers
Description: 👉 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 do, don't forget to keep on making your corner of the internet just a little bit more awesome!
#css Close description
🔗 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 do, don't forget to keep on making your corner of the internet just a little bit more awesome!
#css Close description