Please stop using px for font-size.

Key Takeaways

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 Rems and 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 these settings language and appearance and in the font section and you can choose the 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 RS and this is going to match 32 pixels because 2 * 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 RS 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 RS 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 have two columns set at 1 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 this sidebar you can see stay 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 um grid template columns to use RS instead of pixels so in the Spector 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 um readability because the lines are just really short and this one just feels a lot more comfortable to read so hopefully this helps illustrate you know why using RS when setting the width of elements is just going to be a lot better in terms of readability all right 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 1,000 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 1,000 pixels so at 1,00 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 Rams the text is set in RS and also the width of the sidebar is also set in RS 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 w3c or the worldwide Web Consortium and there 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 w3c says that we want to be able to allow users to resize up to 200% without you know losing content or functionality meaning the website should still be reason um 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 the sidebar because again we've set it to 300 pixels but in RS 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 1,000 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 1,000 pixels I'm going to replace it with 62.5 em and you can use em 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 it 1,000 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 2,000 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 a lnes 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 RS 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 um as CSS custom properties and convert to RS in them so you can see here on the root element I have created a few properties so 16 pixels turns into one ram 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 1,000 pixels because you're most likely going to be reusing the same measurements throughout the website um 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 H1 tag the font size is VAR and then 32 pixels um 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 you know huge timec consuming thing to do and it's pretty easy to to you know remember the sizes the only downside of this um 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 you know manually write out 62.5 em so that's the pure CSS way of you know converting pixels to Rems and making it reusable so now let me show you my personally preferred approach which involves using scss or SAS and not pure CSS so in SAS you can create things like functions and it's one big reason why I'm still using SAS even though CSS has come just a really long way in the past several years so here this SAS 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 H1 tag we set font size and the value is the REM function and then in the parenthesis 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 SAS is that you can use SAS functions inside media queries so now I don't have to you know do the math to convert from 1,000 pixels to 62.5 em I can just write Ram 1000 and then when we compile the SAS styles to CSS Here's the final CSS file and you can see that the compiler has you know 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 SAS 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 htl 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% um meaning it's going to take 100% of your browser fonts that You' set in your browser settings Now setting this to 62.5% is going to make one ram equal to 10 pixels instead of the default 16 because 10 is 62.5% of 16 and this does make converting a lot easier because you can just divide by 10 for everything so you can see in our styles for our H1 tag here we want it to be 32 pixels and you convert from 32 pixels to RS we just have to divide by 10 and set it to 3.2 RS 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 Ko's blog he has a really excellent blog and in it he talks about this 62.5% hack or trick um 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 you know make all the sizes from those third party packages smaller to match your 62.5% size um but yeah check out Josh Ko'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 SAS 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 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