Simple solutions to responsive typography

In this one, I look at two simple ways to make maintaining your site's typography much simpler!

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:49 - The problem most people run into
02:28 - Using custom properties
05:16 - The issue with viewport units
07:18 - Using clamp()

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

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.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[technikhil]

That +1rem is noiceeee I love it. Pinch zoom is issue with viewport units.

[MilanRegec]

So glad to see Kevin now includes accessibility concerns in every video he makes. This is so important for the community. Thank you!

[munaq-jp]

I've been using clamp instead of media queries for a while now. But using both with variables is brilliant. I absolutely love it.

[gregoryolenovich]

Damn your responsive layout tutorials are so helpful and I'm a fairly experienced dev. I love the clamp thing. I have been using min to get something similar but I like clamp even more.

[sumitwadhwa]

As always, great stuff. I think min, max, and clamp are pretty awesome.

[fahimsangharriyat]

clamp(3.5rem, 12vw + 1rem, 12rem) which is amazing. Now I will be use in my all projects

[Cowglow]

The Clamp trick is amazing!!
Thank you for the tips!

[SolomonOni-dy]

You have made me I love with CSS and I'm really surprised with the amazing things you can use only CSS to do

[Atractiondj]

it's nice to see a video with material about which you knew for 6 months already

[BrunoTalksTech]

Man, that's absolute genius, been fighting with this for years! I'm saving this video with my legacy firefox youtube downloader, that vid going in my library!

[gonzaotc]

Kevin, you are the fucking best, you know, right?. This week I learned A LOT from you. Your content is incredible. Everything I have to do and find out how to on my projects, I search and you explained it better than anyone.

[petarkolev]

Kevin, you are my savior! Yet another amazing video ❤️Thank you so so much and I wish you an amazing new year!

[MeetDaveG]

Thanks for this video Kevin. Just used (clamp) for one of my designs after this. Super helpful.

[CarlosAlgms]

I've never heard about clamp, I loved it, thanks for the video.

[ViorelMocanu]

Excellent technique with the clamp + calc (implied)! :) Thanks!

[SachinShukla]

“frontend friends.” for months i thought he was saying “friend and friends.”

[henkmeerhof]

Great that you explain we should not base font size on the view port size. It is not how typography works. Typography works on view distance (and you eye sight) so unless our devices get a sensor to measure how far our eyes are away from the screen we are reading, we have to work by the experience we have. Here we are in luck as we already use type for centuries, so we have some experience. An experience that is supported by some science of the last century where reading over distance became a real thing, like how large should type be on a road sign...

The other great thing I would implement as soon as possible is to gather as much typographic parameters and behavior in one place, somewhere at the beginning of (css) files.

[zrowork]

Great, helpful staff. Love how you explain what I shouldn't use. Made my day. Thank you!!

[design]

good point about VW and accessibility issues.

[BasilBear]

Thank you, Kevin, that was precisely what I was looking for. I have subscribed for more. :)