Auto-generated transcript Hey what's going on guys this is going to be a different video from the go redis 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 chat GPD to make for me I literally just went over to chat GPD 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% 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 30 pixels right If I shrink the screen now it 20 pixels So we reduce only 10 pixels over here That's like, I believe it's, 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? But in 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, 1%, 2%, 5% 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. 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 is some hidden formula or ratio that you can use to resize all of 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. 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.