Channel: Kevin Powell

Category: Education

Tags: csstypetura tutorialcontainer queriesresponsive typeresponsive typographykevin powellcontainer queryresponsive texttypeturaresponsive cssresponsivehtmltutorialfront-endfrontendcss typography

Description: Responsive typography is tricky, and while solutions with clamp() can be really handy, we can't have that look at the context of an element, only the viewport width (at least for now). With Typetura, we can have it look at the context that the element is in, change the easing curves, and even animate other properties than just the font-size. It's pretty cool! 🔗 Links ✅ Typetura: typetura.com ⌚ Timestamps 00:00 - Introduction 01:16 - What we're starting with 01:59 - The problem with clamp() 02:47 - Adding Typetura to a project 04:07 - Setting up the keyframes and getting them working with a selector 07:29 - Adding a context 09:04 - Changing the max size 10:47 - Defining custom contexts 13:24 - Adding a fallback 14:45 - More than just font-sizes 15:34 - Easing #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 💖 Support me on Patreon: patreon.com/kevinpowell --- 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!