Stop scaling text sizes proportionally

Hey, what's going on, guys? This is going to be a different video from the GoRedis clone series that I've been working on for the past couple of weeks. I want to talk about web design again, and in particular, I want to talk about responsiveness and how you resize your typography across different screen sizes. So one of the mistakes that I see people make when they're trying to build responsive typography on their website or on their designs, right, is they try to scale every single value proportionally. So, for instance, they try to scale the size of their headings and their body text, right, proportionally. And that's a big mistake because headlines are very large, so they have to shrink a lot faster than body text. All right, so I have this little article over here that I just asked ChatGPT to make for me. I literally just went over to ChatGPT, told it to write some, you know, generic article that I can use for, you know, teaching you this concept. But what I want to basically show you over here is how much the headings over here change as compared to the body text over here when I shrink the screen size. So if I just keep shrinking this, and there we go, right? So you can see that the headings actually change a lot more. They shrink a lot more than the body text, and that is what I want to teach you today. So basically, you are not supposed to proportionally shrink or enlarge your fonts, your text, right? Your headings are going to change a lot more than your body text and, you know, vice versa. In fact, body text is going to barely even change, maybe just a two or four pixel change, if even that, right? Body text really doesn't require much changes across, like, different screen sizes. So if I actually show you the changes in font size over here, you'll see that the, if I go over here to the Computed tab and if I filter the font size, you'll see that the font size of this heading over here, right, is 30 pixels. If I increase the size again of the screen, right, you'll see that now it's 60 pixels. So basically, I'm shrinking from 60 to 30, which is a 50 percent decrease in font size, right? If I show you the same thing over here in the small heading over here, right, in the subheading, and if I increase the screen size again, you see that it's 30 pixels, right? If I shrink the screen, now it's 20 pixels. So we reduce only 10 pixels over here. That's like, I believe it's a, and I'm not good with maths, but that's a 33% decrease, right? Whereas up here in the first heading, in the main large heading of the page, we had a 50% decrease in font size, right? This subheading over here, we literally only have a 33% decrease in font size, which is a huge difference for sure, right? If I go over here to the body text, right, and if I go and increase the screen size again, you'll see that it's 18 pixels, right? The body text by default on large desktop screens is 18 pixels on this page. If I shrink the screen again, now it's 16 pixels. So literally just a two pixel difference. That's like, I don't know, one percent, two percent, five percent difference, right? I don't even know. It's such a tiny difference. But basically, the main thing that I want to emphasize here is that there is no good ratio or proportion that you can use to, like, mathematically shrink or increase the font size, right? Every single, like, every single element on this page is being resized independently. There is no relationship between all of these elements. There is no little formula that you can use to resize these elements. They are all being resized individually. The large heading is being resized by 50. The small heading shrinks by 33, and the body text literally just changes by about 2 pixels. Exactly 2 pixels, right? So there is just no good relationship between these. Every single element is being resized independently and individually. So just don't make the mistake of thinking that there's some hidden formula or ratio that you can use to resize all these elements together. There is no relationship between all of them. They're all independent elements, right? In fact, the only, like, rule or, like, formula or hint that you can use in this situation is that larger text is going to shrink a lot more and a lot faster than smaller text. Smaller text. That is literally the only rule that you can keep in your mind in this situation, right? Other than that, all of these elements are independent. They have no relationship between each other. So don't even try to use some sort of a ratio or something to connect all of these elements together, right? That's all I want to talk about today in this video, and I hope this helps you design better and more responsive typography and more responsive interfaces. Thank you for watching. Like the video, comment down below what you think about all of this, share, and yeah, thank you for watching, and I will see you in the next video. Bye-bye.