Please stop using px for font-size.

- Speaker A tells people why they shouldn't be using pixels anymore and how to convert from pixels to rims. Speaker A. Speaker B. Speaker C. - Mozilla says defining font sizes in pixels is not accessible because users with limited vision may wish to set the font size much larger. Using rems instead of pixels in your font size is better for accessibility. - A speaker explains why not to use pixels in the media queries and why to use Rems or Em units instead. Then the speaker shows an example of a website with the main content and the sidebar.

Hey folks, so I wanted to talk to you about why you really shouldn't be using pixels anymore for things like font size as well as the width and height of elements. So I'm going to cover why you shouldn't be using pixels for these cases. What can go wrong if you do? And I'll show you a couple of ways that you can convert from pixels to rims. It might be easier than you think. Sound good? Let's get into it. So first, what's so bad about using pixels? Well, in short, it's an accessibility issue. So here on Mozilla developer network, it says that defining font sizes in pixels is not accessible because the user cannot change the font size in some browsers. And users with limited vision may wish to set the font size much larger than the size chosen by the web designer. So what does this mean exactly? Well, in every browser you can set the base font size. By default, this is going to be 16 pixels for most browsers. So in Firefox you can set this in the settings language and appearance, and in the font section, and you can choose a size with this drop down menu. In chrome, this is going to be in settings, appearance, font size. And if you select medium recommended, that's going to map to 16 pixels as well. And websites are going to take their font size from that setting. So whatever font size you choose in your browser is what's going to be one Rem on the website. You can actually see this if you look at any website. So on this demo website that I've made, if you inspect the HTML element and you go to the computed styles and you check the browser styles checkbox, this is going to load all the default browser styles and there's a lot of them. So let's filter for font size. You can see here that it is 16 pixels right now, and this is again because of those browser settings. So on this website we have two sets of headlines and paragraphs. The first is in pixels with the headline set at 32 pixels and the paragraph is set at 16 pixels. And then below that we have the second set where I set the headline at two rems, and this is going to match 32 pixels because two times 16, which is the browser base font size, is 32 and the paragraph is set at one REM, which also maps to 16 pixels like the top paragraph. So right now these two sets are the same size. Now let's see what happens if we go into our settings and we change the browser size to 24. So I'm going to reload again. So you can see that the second set, which is the one using rems, got bigger. But the first set, which is using pixels, didn't change at all. And this is because pixels are what's called an absolute unit. That means that their final size is not dependent on anything else. 24 pixels is always going to be 24 pixels. And this is not great behavior for users who are trying to make the text on the website larger through their browser settings. And in comparison, rems are relative units and their final size is dependent on something else, which is that root font size that we set in our browser. And you know, I know that you can zoom in on the browser to make the text bigger, but you know, this font size setting still exists in browsers and people do still use it. So I feel like we as web developers should do our best to allow these browser settings to, you know, have an actual effect on websites. So hopefully you can see now that using rems instead of pixels in your font size is just better for accessibility. However, using pixels in other areas of your site, not just font size, can mess up how your website looks if the user changes the browser font size. For example, take this website. We have a main content here on the left and a sidebar on the right. All the font sizes are set in rems. However, we have a two column grid layout going here and the grid parent is the body tag. And in the styles you can see that we have two columns set at one fr and 300 pixels. So this means that the sidebar is going to be 300 pixels no matter what. And then the rest of the available space goes to the main content and we're currently at the default 16 pixels in our browser settings. So what happens if we change it to 24 instead of 16? So now when I reload the site, the sidebar you can see stayed at the same width, it's still 300 pixels. However, all the font sizes on the main content and in the sidebar have increased since we increased the browser font size. And it's kind of resulting in these sidebar text feeling kind of cramped and narrow. So it's not the best for readability. So let's try and change the grid template columns to use rems instead of pixels. So in the inspector in the body tag, I'm going to uncomment this style here using basically the same rules, but it's setting it with Rems instead of pixels. You know, if you toggle this checkbox, you can see that this is not great for readability because the lines are just really short and this one just feels a lot more comfortable to read. So hopefully this helps illustrate why using rems when setting the width of elements is just going to be a lot better in terms of readability. Alright, so in this next example I'm going to show you why you should not use pixels in your media queries, but you want to use Rems or Em units instead. So we have the same website with the main content and the sidebar and we have a style rule that when we change our viewport width to 1000 pixels and below we're going to break to one column instead of having two columns. You can see the style rule here on the body tag. We have our media query set at 1000 pixels. So at 1000 is when it breaks to two columns. And right now we are at the default 16 pixels of font size in our browser. And everything is set in Rems. The text is set in rems and also the width of the sidebar is also set in Rems. So let's see what happens when we change our browser font size. And I'm actually going to double this. So go from 16 to 32. And the reason for that is that we have a set of web accessibility standards. It's created by the W three C or the Worldwide Web consortium, and they're the elders of the Internet and they've created the standards that ideally we would try to meet with our website styles. So for the standard for resize text, the W three C says that we want to be able to allow users to resize up to 200% without losing content or functionality, meaning the website should still be reasonably usable and readable. So that's why I've changed our font size to 32. So let's go back to our website and see what happens. So now when I reload this looks much different and the main content is now just super narrow and cramped and, and the sidebar because again we've set it to 300 pixels but in Rems it's increased to be double. So this is essentially 600 pixels wide. So there's only, you know, 400 pixels left for the main content. And this is not great because, you know, we only have 1000 pixels and it's just too narrow for a two column layout when we've increased the browser based font size. So let's go back to our code and we want to change the media query to use EMS instead of pixels. So here's our styles for the website and instead of 1000 pixels I'm going to replace it with 62.5 ems and you can use EMS or rems. There used to be a bug in safari where rems would not be great for media queries, but I think that's been fixed. So you can just use EMS or rems in your media queries and they'll both be the same. So let's save that and let's go back to our website and reload. And I'm just going to close this out and show you that now the layout is in the one column instead of the two column layout. And this is because the media query is not going to hit at 1000 pixels anymore. It's going to hit at double that because it's following the browser base font size and it's only going to break to two columns when we hit 2000 pixels wide. So now it's going to two columns when we have more available space in the viewport to fit that two column layout. Otherwise it's going to be one column. And this is just a lot more readable in terms of the length of the lines. So, you know, please don't use pixels in your media queries because you know, you don't want that really cramped layout if the browser font size changes. You know, I do admit that converting from pixels to rems can take some extra time and it can be a little bit annoying. So I wanted to show you a couple of ways that can hopefully make it easier for you to use rems without having to pull out the calculator and divide by 16 every time, which gets old really quick. So this first way works in pure CSS, and in it you map out all the pixel sizes that you're going to be using on the website as CSS custom properties and convert to rems in them. So you can see here on the root element, I have created a few properties. So 16 pixels turns into one REM, 24 turns to 1.5 rems, and so on. And you know, you're probably not going to want to add, you know, every single size from one pixel to 1000 pixels because you're most likely going to be reusing the same measurements throughout the website. And there is a little bit of upfront work in this to, you know, set up and do the math one time. But once it's set, it's actually not that hard, I think, to use these CSS custom properties in your styles. You can see what I've done here. For example, for this h one tag, the font size is VAr, and then 32 pixels, the name of the CSS custom property. So I actually really like this solution. I feel like it's pretty efficient and it doesn't feel like it's a huge time consuming thing to do, and it's pretty easy to remember the sizes. The only downside of this is that at least currently you cannot use CSS custom properties in media queries. So you can see here in the media query that we have, I did have to manually write out 62.5 ems. So that's the pure cSs way of converting pixels to Rems and making it reusable. So now let me show you my personally preferred approach, which involves using SCSS or Sassenhe and not pure CSS. So in sass you can create things like functions. And it's one big reason why I'm still using SAss, even though CSS has come just a really long way in the past several years. So here the sass function is called REM and it takes one parameter which is the number of pixels. And then in the function it's going to divide by 16 and then add on the REM unit for your style. So the way this gets used is if we look down in the styles in the h one tag we set font size and the value is the REM function. And then in the parentheses we have the number of pixels. So 32. And I'm doing this for all the styles that you can see here. And the benefit of using sass is that you can use SAss functions inside media queries. So now I don't have to, you know, do the mathematic to convert from 1000 pixels to 62.5 ems. I can just write Ram 1000. And then when we compile the SAss styles to CSS, here's the final CSS file, and you can see that the compiler has converted from the REM function to the final REM value in the CSS. So those are two workarounds which I think are pretty good. Now every time I talk about rems, someone is always going to ask, you know, what about that 62.5% hack? So that was a workaround before Sass and before we had CSS custom properties. So back then it really was a lot more work to have to divide by 16 for every individual pixel measurement. And the workaround involved changing the font size of the HTML element in your styles. And you can see this here, we've set the font size to 62.5% instead of the default is going to be 100%, meaning it's going to take 100% of your browser font size that you've set in your browser settings. Now, setting this to 62.5% is going to make one REM equal to ten pixels instead of the default 16 because ten is 62.5% of 16. And this does make converting a lot easier because you can just divide by ten for everything. So you can see in our styles for our h one tag here, we want it to be 32 pixels and you convert from 32 pixels to rems. We just have to divide by ten and set it to 3.2 rems. In the same way, instead of 24 pixels we can just write 2.4 rems and so on. And the math is like a ton easier. So I can see why people really like the solution and are still using it today. However, I would not recommend using this anymore because it can have some unintended consequences. So if you've read Josh Como's blog, he has a really excellent blog and in it he talks about this 62.5% hack or trick, but he says he does not recommend this approach and there's a couple of reasons it can break compatibility with third party packages and what's happening is that if you use a package or a library that is using rems in their styles, then everything on your website is going to be more than a third smaller than it was originally intended to be. So you might have to do some extra work to make all the sizes from those third party packages smaller to match your 62.5% size. But yeah, check out Josh Como's full blog post. He's a really great technical writer and developer. And if you liked this in depth explanation and want to learn how to build a website from scratch, I have a new course out called responsive design for beginners where I'll show you step by step how to organize and set up your SaaS styles, how to build a responsive website from a Figma design, and in general how to problem solve and think like a developer. It's on sale now through the end of the summer and I do have PPP discounts if you're outside the us link is in the description below. It.