Responsive Typography 2020 (Font Size Scaling in Webflow)

💎 Webflow Wizards Community
The ultimate community to improve your skills and connect with like-minded Webflow Developers

👨‍💻 Consulting Sessions

In this tutorial, we'll cover how to setup your font sizes, images, and all content to scale seamlessly with the browser width until it reaches the max width of our container. This method allows you to take advantage of the pros of VW without breaking your layouts on larger screens and while keep font sizes easy to adjust on mobile.

Get the cloneable style guide at (affiliate link)

Try Webflow using my affiliate link below.

[juanchojack]

You have no idea how long I’ve been meaning to find this method!!! Thanks!

[weshal]

this video is absolutely brilliant. thanks Tim. I'm a UI Designer who's been using Webflow for about 3.5 years and I understood everything perfectly. Always steered clear from using em/rem but I think I'm gonna give it a whirl now.

[AbrahamKouyaté]

I just wanna say, I'm a web designer and this tutorial is so comprehensive and helpful. I wanted to communicate my needs to my Dev for him to understand my needs and all this information helped me tremendously. Thank you very much

[danielndrssn]

Think I've watched this 10 times now. This is so clever!

[torisutantejero]

timothy you are goated for life. thank you for all the videos you make.

[SayuriYaki]

Summary (pls correct me if I got it wrong):
1. set Body > Typography > Size to 1 VW
2. set every size (of text, divs etc) you want to scale to x EM
3. for breakpoint adjustments: in-/decrease the Body > Typography > Size to x VW

[James-vtvn]

Amazing video. I just spent my night re-developing a clients entire website using this. Thanks mate.

[mike-d]

Cant't wait to implement this!
I've been using VW for all measurements and have been frustrated with not being able to do a max font size.

[Kabarza]

I'm getting so much out of these videos! Thanks a lot.

[swae]

Very smart guy. Keep up the good videos! Appreciate your work. love from the UK 🇬🇧

[Colossus]

Thank you for this! I was a little frustrated trying to figure out how you achieved the max width on the 1.3VW font. Thankfully it was the embedded code on your cloned site. I don't think you had that part in the video! Anyway, absolutely incredible!!

[parkerjones]

Wow it pains me immensely that I didn't see this video earlier. Great info, this is super helpful!!

[davidlao]

I’m really enjoying your tutorials and the extra facts and tidbits you sprinkle in. Keep up the great work and thank you for your time and efforts in creating and showcasing what you have learned!

[jamesmonroedesign]

This is a wonderful explanation on why to use Divs as opposed to the premade Webflow options. Wish I had this when I started. Thank you!

[normthomasmarketing]

Wow! I learned a lot of what I knew but never saw it explained for WF use very well. Thanks- One happy Patreon here.

[joelm]

You're the teacher I always wanted.

[djazzelicious]

Your channel is gold, thanks for your work

[hofling.studio]

Such an awesome channel you have Timothy. You're doing great. Next to Finsweet by far the best channel for Webflow Developers/Designers. Really advaced stuff made simple. Thank you so much. I am copying your code-list atm 😊

[leonstoel]

Absolute must Watch Video if you want to get very effective. This saves so much time and effort. Great effort!

[noah-talon]

Damn! This video was jam-packed with useful information and extra information I didn't even know I needed to know. Thanks a bunch!