Easy Responsive Typography (CSS-only)

In this video, I'll show you how to set up a fluid responsive typography scale with the CSS clamp property.
🔗 Key Links 🔗
- CodePen: codepen.io/Cod...
- MDN docs on clamp(): developer.mozi...
- Caniuse.com: caniuse.com/?s...
- Open Props: open-props.sty...
- Utopia Font scaling: utopia.fyi/
- Modern Fluid Typography: modern-fluid-t...
---------------------------------------
📹 Related Videos 📹
- Get Started with Open Props: • Open Props CSS Framewo...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic...
- Blog: chrispenningto...
- Twitter: / cpenned

[@jimmyj.6792]

Thanks Chris for this responsive presentation 🙏👌

[@CodinginPublic]

You’re welcome!

[@lvekua]

Love it ❤ Thanks for the awesome content!

[@CodinginPublic]

Glad it was a help! 🙌

[@technotoyou4209]

This was absolutely brilliant. Many thanks.

[@CodinginPublic]

Glad it was a help!

[@anuj7286]

This makes my life easier thank you so much sir!

[@CodinginPublic]

You’re welcome! Glad it was a help!

[@humbulanimunyai6320]

Always awesome content, happy coding

[@CodinginPublic]

😊

[@anonymouseverx]

Very informative like always. Thanks, Chris.

[@CodinginPublic]

🙏

[@ahmetdijitaldönüşüm]

I newly discovered you. This is awesome thank you 🙇

[@CodinginPublic]

So glad you’re enjoying the channel ☺️

[@DTUSEM]

Good content. We need more like this that can be used in our websites also. धन्यवाद ।

[@CodinginPublic]

You’re welcome! Thanks for saying something!

[@shovadas01915]

Good Content. And much informative. I'll learn new thinks. Thanks for everything.

[@CodinginPublic]

Glad it was a help!

[@CephalonShohan]

Found it quite helpful. Thanks

[@CodinginPublic]

Glad it helped!

[@Talel_kraiem]

Very helpful may god bless you for this

[@CodinginPublic]

🙏

[@sindupratama8966]

thans bro you save my day

[@CodinginPublic]

Glad to help!

[@nitinsoni9956]

Your videos are AAA ( Awesome As Always).

[@CodinginPublic]

🙏

[@JohnBartmannMusic]

sweet, thanks for this

[@CodinginPublic]

You’re welcome! Glad you enjoyed it!

[@Mashael_96]

Thank you

[@CodinginPublic]

You're welcome!

[@moneyfr]

So strange your videos were not showing on my KZbin for so long

[@CodinginPublic]

Weird. KZbin hasn’t been showing my content much and I’m not sure why? But glad this one found you!

[@RajSidhux]

Hey, i am using this for my fluid fonts - calc(8px + 0.390625vw) - which would you say is better to use, Calc or Clamp?

[@CodinginPublic]

Clamp would be better. It uses a calc, but you also can set a min and max size. On very small or very big screens a pure calc can have odd results. So the clamp sets min and max values nicely.

[@maruko8324]

This is very great! Thank you for introducing Modern Fluid Typography Editor. Btw why is it at some point of viewport width (let's say 700px) my h1 and h2 has the same size until 800px or higher? Obviously my h1 settings is higher than my h2. Is this some kind of bug?

[@CodinginPublic]

Hey! Sorry for my delay. Hmm…I'm just thinking it was the math between the two. If I remember correctly, I set the small screen size to grow at a different rate than the larger screen size. So at some point they may overlap a bit or look very similar, but it should all be correct according to the math?

[@codewithfarhad8594]

hello good sir, what VS theme and font, color schemes etc you are using? It looks really refreshing and I would like to copy the styles for my home setup 👍

[@CodinginPublic]

My VSCode Theme and Font Setup kzbin.info/www/bejne/a6aohYeOrbudbtU

[@codewithfarhad8594]

@@CodinginPublic thank you so much for sharing all this awesome content 👍

[@wentallout]

I think the open prop way is too bloated. If I need a typescale I will use utopia. I dont need a giant css framework that has too many variables I cant remember

[@CodinginPublic]

Yeah, I think it’s supposed to be used more selectively, just when you want some spacers or perhaps a transform, etc. But it’s great to have options and no worries if you’d prefer Utopia. It’s awesome, too!