Responsive Typography 2020 (Font Size Scaling in Webflow)

[@juanchojack]

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

[@danielndrssn]

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

[@weshal5127]

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.

[@hofling.studio4689]

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 😊

[@davidlao967]

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!

[@timothyricks]

That’s so great to hear! Thank you!

[@Kabarza]

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

[@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

[@leonstoel9028]

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

[@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!

[@James-vt1vn]

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

[@timothyricks]

That’s awesome to hear! Thank you!

[@loyaldesignco]

Best webflow tutorials by far

[@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.

[@cre-ate]

Great knowledge, I have never used the combination like that before. Will try it on my next website. Thank you

[@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!

[@torisutantejero677]

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

[@ethanfenton6136]

A few really helpful tips here, Tim! Appreciate it bud.

[@Colossus177]

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!!

[@thedesigndept6611]

So informative! Great demonstration of the different classes! Thanks for sharing!

[@joelm1988]

You're the teacher I always wanted.

[@timothyricks]

Happy to help!

[@djazzelicious]

Your channel is gold, thanks for your work

[@kylepitocchelli1738]

Thank you Timothy! This was very helpful. I have been using VW to create responsive text for a while now but I love how you set it in body class first and then switch to ems for even greater control and reduced complexity. Well done!

[@sw23ae]

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

[@normthomas5028]

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

[@timothyricks]

Thanks so much! That’s awesome to hear

[@JustBrenton]

Hugely helpful, thanks Tim

[@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

[@ivanovicpedroza]

Great! I'm a pretty beginner on webflow, and this summary saves my day!!

[@jeansvanjeansington1794]

How do you connect the Bosy settings to the actually paragraphs and headlines? I'v got the styleguide and changed the font size there, but nothing changes..

[@this.is.period]

@@jeansvanjeansington1794 You need to go to a classes field and choose "All body" pink badge. Then you'll be changing all body fonts

[@cyrohan21]

Fabulous video as always. Thanks!!!

[@Londya]

Ohh ok, just watched this video and you explained the whole section & container vs. div and Google SEO stuff. Thanks!

[@timothyricks]

Glad it helped!

[@iamgsilva]

Gamechanger! Thank you SO much for sharing this. Easy subscription from me!

[@parkerjones6717]

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

[@nyeo]

Mate, this was so we’ll explained! 🙏

[@andyrenton1962]

So great Timothy!

[@Stuartsmith04]

You are a legend! Awesome, helpful video :)

[@KUZON99]

Thank you so much for this video!

[@daph_w]

Thanks a lot! Super helpful 😻😻😻

[@JulianHibbert]

This rocks, thanks so much!

[@vadikaladik69]

Declare the GOOD news! Amen!

[@camerongould]

Thank you!

[@rawa6496]

Thanks for that!

[@Pearse551]

SUBBED AND LIKED AND ALARMED nice one bruv!

[@johnnybecrafting9286]

you're going to far in the youtube game. Lots of tutorials with mediocre websites, few of those produce high-quality products. You're the latter and I can't wait to see what you have in store! (btw just supported you on patreon :) )

[@timothyricks]

Thank you so much! I really appreciate the support and am pumped about providing more WebFlow pro tutorials!

[@memegod6340]

I didn't understand anything to be honest. I got the last part tho. I think I will just watch the wizardry playlist than comeback and watch it 10 times very careful so I understand it. I think it would be kind of better if you do everything in steps and get to explain things more (like webflow university) . Not to offend you but the speaking is a bit dry. I can't engage fully, kind of have to force myself to listen. I want to learn this and I appreciate you and the time you give up for us to educate us on webflow. Cheers :)

[@arturszyna4988]

Thank you Timothy for taking the time and explaining this! I think you can use rems in Webflow by just typing 1rem for example and it will switch to it.

[@timothyricks]

Yes, you definitely can! You just can’t change the HTML font size that it’s based on across breakpoints without code. So like if you wanted to make all font sizes larger on mobile, you’d either have to select them one by one or add code to change the base html font size

[@arturszyna4988]

@@timothyricks Oh thanks! Now, I get it :)

[@brianmcdonaugh6370]

King.

[@fortunebrown9405]

Lovely video Bro Please for a section's height, what vh value would you use to make it responsive?

[@loganbenjamin8922]

Such an awesome video!! Now that you mentioned it in the video, I definitely would love to see a full semantic HTML tag tutorial (I.E. where you give a Div the section tag).

[@timothyricks]

Logan Benjamin Great idea! Thank you!

[@loganbenjamin8922]

@@timothyricks No problem!

[@jo69123]

Timothy, could you make a video for creating SVG image masks using CSS embeds? Can't find a good video about it anywhere, and it seems like a very needed feature in webflow

[@Astendor]

Thank you so much. The only thing i don't understand is how i stop the font from just scaling up endlessly... I did it exactly like in your clonable. Set a max-width to my container. But the fonts inside the container just keep on scaling up. What can i do?

[@thatguy601]

I have set the text I want to be scaled, but I can't seem to achieve the paragraph to be totally locked like I saw in you cloned webflow file.

[@LDOYT]

how do you set a max font size?

[@martynaspuotkalis4117]

My question is why not then use Section and change the Tag to the Section? Div-Tag-Section, another Div is placed inside an does the Tag needs to be changed?

[@inkiadhaider3929]

you should create some videos on design, I absolutely love how you design things

[@timothyricks]

Thanks so much! Definitely want to create those in the future.

[@inkiadhaider3929]

@@timothyricks waiting 🤞🏻

[@des7638]

Agreed

[@DimaPtashniuk]

Sorry, hello, but in what units do you heave your main-title so it isn't growing while viewport is huge? - My problem is next: I have ma title (for example) in VW units and I can't stop its grow by max-sizing of section or wrapper in which this title is. Where is mistake? Please help!

[@user-rb6bi8xt2e]

Can somebody clarify why there is a set maximum width for the section?

[@franci-uz]

Hi, do you create templates on webflow templates? Would love to buy one from you!

[@bryanmanio_]

I went through your other tutorial and learned a ton. My problem is now a few days later, it seems I have some consistency issues with some type being in vw, and some being in ems, which is making things a bit weird on mobile. Just to clarify - once I set the primary body tag to vw, should I only be using ems for the rest of my headings and paragraphs in the designer itself? Thanks so much!

[@timothyricks]

Hey Bryan, yes that’s correct! You may want to switch the body font size to px on mobile. If all of your headings are set to em, that would make all of them px with that one change to the body and should solve that issue.

[@eddu4361]

Why not using the css clamp function for setting font sizes to be scalable? FI for a H1 something like this clamp(3.2rem, calc(3.2rem + ((1vw - 0.32rem) * 1.6667)), 4.8rem) etc. You can do this for all your text and even for images. I added the following html code to convert 1 rem to 10px instead of 16px : html { font-size: 62.5%;} Makes it a lot easier the think through your font sizes.

[@salty-good]

Why does the text keep getting bigger as the viewport gets bigger even though I set maxwidth on the container?

[@thegalhorowitz]

If this guy starts a new religion, I'll follow it.

[@walterbaeyens9813]

Thank you for this, great work , any way for a tutorial on how to get the infinity loop upwards like at min 5

[@timothyricks]

Walter Baeyens Someone released a cloneable for that at webflow.com/website/Easy-CSS-only-Marquees-Easy-CSS-only-Marquees-Easy-CSS-only-Marquees

[@walterbaeyens9813]

@@timothyricks thanks for the link :-)

[@lanochedelaspatatas]

A question of accessibility. What happens to the fonts size if the user has a bigger root font size installed as default in the browser? (ex. people with low vision). Does this method consider their settings?

[@timothyricks]

Hi, great question! This method does not and is outdated

[@johanvanwambeke723]

Damn! now I have to swap out all my sections 😭

[@fuegodesignz908]

I paid for a "Master course" and he did not mention this key feature Viewport width! In less than 2mins your video help my site be more responsive on a free video on KZbin. Im pissed. anyway Thank you.

[@framerprojects]

Yesterday I was working on a new Webflow site where I wanted to set relative sizes for my headings and today, I stumbled upon this video :) First, I tried rems because I didn't want any conflicts with containers, but it didn't work. Afterwards I used percentage size and with that solution the heading sizes scaled nicely based on the body font size. But I am still not sure if percentage values won't be affected by parent container font sizes. So basically it's similar to ems I guess?

[@timothyricks]

Dule D. Percentage values for font sizes would be affected by the parent container font sizes. You’re right, it works very much like ems.

[@mukulgarg4619]

Hey Duskolo! I'm experiencing the same issue with REMs. I was working on a new project in Webflow & the REM typography was scaling seamlessly. But I must have done something and it is just not scaling anymore. Have tried everything before coming here. Were you able to sort this out? Thanks in advance!

[@des7638]

Awesome video (as usual). Do you have good resources on how to estimate “ems”for padding, image size, etc.. makes sense for text but not so much for layout properties.

[@timothyricks]

I usually use the Chrome extension, What Font, to get an idea of what font size the body is at a certain screen size. Like if I designed my website at 1920px in XD and my paragraph font is 18px, I find out what vw I’d need to make it 18px at 1920px screen size. Then I’d know that 2em would be 36px, 3em would be 54px. It takes some multiplication, but it is possible. Usually I just have the full screen static design open in a tab next to WebFlow and then I preview WebFlow in full screen to get an accurate comparison.

[@des7638]

@@timothyricks Thank you for the reply. Thats waaaaay over my head. Maybe that is something you could make a video on. Just an idea. Keep crushing it with the original content! TY!

[@timothyricks]

Brian DeSimone Definitely a great idea for a future video! The simplest way is just to eye ball it until it looks right to you. Being precise takes some math.

[@des7638]

@@timothyricks COOL

[@thejaysehansen]

Check out Wizardly that he just posted! Calculators!

[@nasiy]

Hi Timothy! Thank you so much, amazing video. I cloned the guide and only one thing I'm finding as a problem. I follow all the instructions and when I tried to increase the size in Body All Pages to lets say 1.3VW like you do at 2:45 on this video, the fonts don't scale. But if I do this on the BODY tag they scale. Am I doing something wrong?

[@timothyricks]

Hello! Thank you! There’s some custom code in an embed on the page that stops the body all pages tag from scaling on larger screens when you reach the container’s max width so the design doesn’t break. If you reduce your desktop screen size and remove the body class, you should see your changes to the all pages tag.

[@nasiy]

@@timothyricks Oh ! Great, I got it now! My only other question is in the design guide when I click on the paragraph it inherits its style from the Body al pages and it is in VW, should I change it to EM as I did for the other headings. Sorry that might be a newbie question but I am new to web development and want to get it right.

[@timothyricks]

@@nasiy So if you plan to adjust the paragraph font size to something different than the body font size, use EM for the paragraph font size. Usually, I set my paragraph font size first from the body all pages tag and then adjust the headings based on the body font size.

[@nasiy]

@@timothyricks Got it! Thank you so much!

[@PokeFangOfficial]

I built my entire website, went to make adjustments to different breakpoints, and the entire site falls apart. I have no idea what I've done wrong. I've been sitting on this site for 2 months now with no solutions.

[@ChromeChipmunkz]

So how do I actually use it on my sites? Do I import it into my project or something?

[@timothyricks]

Good question! You can set it up from scratch or clone the starter style guide. I’ve recently developed a calculator that converts sizes from px to em. This video shows how to set it up in a project. kzbin.info/www/bejne/jXvdZK14ncqhaKM This website contains all the tools and resources for this technique. wizardry-technique.webflow.io

[@ChromeChipmunkz]

@@timothyricks Amazing, thank you so much. You're the best!

[@TheFlyingEpergne]

i still dont understand how to do it lol

[@tethron.]

This looks great I'll have to learn to space things out this way