write your text in rems. thank me later.

CSS gives us plenty of different units for representing font sizes. We have things like pixels, ems, rems, percentages, viewport width, viewport height, etc. Now they all have their different pros and cons but when it comes to typography the best unit to use is rems. Just as a blanket statement I recommend you to use rems in all of your typography. They're the best unit to use when it comes to font size and in this video I'm gonna show you exactly why. First of all, my name is Hassan, I'm a freelance web designer and I make educational content like this in my spare time. Now you're clearly interested in this so scroll down and click subscribe right now. And it's a win-win for both of us. First of all, what even is the rem unit and how does it work? Well the rem unit is a ratio that connects to the default font size of the page. And by default this is coming from the HTML element, the root HTML element at the top level of your document. Now by default this is equal to 16 pixels which means if I use a value like 2rems then 2rems is 2 times 16 equals 32 pixels. So that how it works Now why is this a good unit for font sizes Well it mostly for accessibility and responsiveness So let me explain First I mentioned that the default font size is 16 pixels But where exactly is this value coming from Well it coming from the user browser settings. All browsers by default have a default font size of 16 pixels. But we can actually change that in two ways. First, we can change the default font size in our browser settings and here's me changing mine in Firefox. You can see that as I increase the font size and my browser settings the text on this page gets larger as well and this is because one rem is now greater than 16 pixels. Second we can zoom in or zoom out of the page and this will also update the value of rems. In other words if I zoom in 200% on this page then one rem will become 16 times 2 equals 32 pixels and you can see that as I zoom in the text increases in size as well. Now it ultimately doesn't matter which method we use in both cases the default font size is going to increase. The problem with pixels however is that they are not going to scale with the user's default font size. In other words if I'm using pixels even if my browser default font size is 32 pixels let's say my website is not going to respect that value My website is not going to use that value and that That means that if my users have poor vision or something they gonna have a harder time reading the content on my website now in the past if you use pixels even zooming in on the page didn't increase the font size but nowadays most browsers will actually increase the font size as you zoom in on the page even if you're using pixels but that still only solves 50 of the problem because yeah sure the user can just manually tinker and fuss with the zoom every time they want to use your website but that's extra effort on their part and why do we want to make our users lives more miserable than they already are right now if i instead use rems instead of pixels my website actually respects the default browser font size and this is because the value of rems literally comes from the default browser font size and that's why we use rems instead of pixels when it comes to typography now speaking of responsiveness the web content Accessibility Guidelines, WCAG, some big organization, recommends that a website should be usable at a minimum of 200% zoom at least. And honestly, I think that value is just a minimum. I've heard from other developers that most people zoom in a lot more than just that. So if we can make our users lives a bit easier by just using a different more responsive unit then why not right Since most of the web is just text it makes sense to optimize this for accessibility and responsiveness especially when the change is as simple as just using a different unit we don't want our users to have to struggle to read the text on our website and as a bonus tip you should also use rems when you're adding margins between your paragraphs and your headings we use these margins to tell where one paragraph ends and where the the next paragraph starts. And these should definitely scale up with the font size. It's going to make our text a lot more readable at high zoom levels. Margins should scale proportionally with the text. So if you're using rem units for your text, you may as well also use them for the margins around your text as well. Now, if you want to level this up even more, there's a CSS function called the clamp function. And it makes it super easy to make your text responsive. I actually made a video on that a while ago. It's titled something like the clamp function and responsive typography or something I'll try to link it in the description as well if I can Go watch that as well because we also use rem units there to make our text responsive. That's all Now you understand the power of rem units use them wisely If you like this press like if you want to subscribe then subscribe and if you want to work with me My website is linked in the description below. That's all. Thank you for watching. Bye. Bye