px vs rem: what to use for font-size in your CSS

If you've watched my videos building websites,  you've probably seen that I use the rem unit   for all my font sizes. And I get asked pretty  often why I use rems instead of pixels. Well,   there's a really good reason for this:  accessibility. What this means is that   some users may need to make the text on a website  bigger in order to read it more easily. They can   do this by changing their browser base font size  in their browser settings. There's a lot more to   accessibility than font size but this is one  aspect of it that we'll be looking at today. But before we get started, I wanted to  give a big thank you to my YouTube members!   Specifically Paul Maximus and Salman  Hersi. If you want to support this channel,   you can click the join button in  any video and get some cool perks. All right, let's get into it. All right, so I have a pretty simple website  here with an h1 tag for the headline,   and then I have some more text  underneath in a paragraph tag.   So let's first look at how to change  your browser's base font size.   I'm using firefox but basically any browser  is going to have this in their settings. so if you open the settings we can see here  that there's something saying fonts and colors.   and it's telling us that the default font  is times new roman and it is set at size   16. so this means 16 pixels. 16 pixels is going  to be the default font size for most browsers.   so let's say we want to make the text  bigger so that we can read it better.   I'm going to change the 16 to let's  say 32 so it's going to be double.   and I've changed that and now we can see on the  website the text is much bigger. it's basically   twice the size. so let me just change it back  to 16. and let's look in the code for this. so in vs code I have the index.html  for that website we just saw open here.   and we have the h1 tag and then we  have that paragraph tag underneath it   and then the styles that are controlling  the text size are in typography.scss.   so the h1 tag we have the font size set to 2  rems or 32 pixels for mobile and then 4 rems or   64 pixels for desktop. so what this means is that  because of our base font size is set to default   16 pixels that means that one rem is equal to 16  pixels. so two rems is 16 times two which is 32.   four rems is 16 times four which is 64. so we can  see this in action. so if we inspect the headline   we have that selected and we can see  the h1 has a font size set to 4 rems.   now if we go to the computed tab it's telling  us that the final font size in pixels is 64   pixels which is exactly what we have set  in our styles. so now let's go back to our   settings again and then once again we're going  to change the base font size in our browser to   32. so this is doubling all of our text size. we  can see the text got a lot bigger. and now if we   look at the h1 tag styles it's telling us that the  font size is now 128 pixels so it's 2 x 64 = 128. so let's just go back and change this.   so the reason that the text size is changing  in our browser is because the rem unit is   dependent on the browser base font size like we  mentioned. but what happens if we have our styles   for font-size set in pixels instead of rems  like we do? so let's go back to our code and   for the h1 tag I'm going to comment out the two  rems. I'm going to replace it with 32 pixels   and these should be the same right. because one  rem is 16 pixels times 2 is 32 pixels. and then   we'll make this 64 pixels and comment out the four  rems. so we'll save that and if we go back to our   website and go for website settings now let's  once again change the size in our browser to 32.   and let's see what happens. okay so we can  see that the headline text sort of stayed   the same. if we inspect it let's refresh that  it's at 64 pixels which is what we had before.   but the paragraph tag text did get bigger because  that is still set in rems. it's set to 1.5 rems.   so the reason that the headline text is kind  of stuck at 64 pixels even though we increased   the base font size in the browser settings is  because pixels are what we call an absolute unit.   and they don't change at all if the base font  sizes change. they're always going to be you   know 64 pixels that's never going to change.  and this is not good for accessibility as you   might imagine because if a user is changing  their base font size settings they want the   text to become bigger and it's not going to  get bigger if you have the size set in pixels. so generally it's not considered good practice to  use pixels as your unit especially for font size.   now you might be wondering you know why can't  users just zoom in instead? so let's look at that.   so let me first change this back to  16 just get everything back to normal.   so everything's back to normal so now instead of  changing the base font size let's zoom in instead. and I'm actually going to go to the mobile   styles to look at that and right now it's  set to 32 pixels. so let's zoom in to 200%   so now it looks like the h1 tag is zoomed in. um  and also the paragraph tag got bigger as well.   oops wrong window. so we can see that zooming  in does actually make the text bigger and this   is because when you're zooming in you're basically  making the pixels you know zoom in so everything's   getting bigger even if you have it set in pixels.  however the zoom function is something it's kind   of a newer feature in browsers. and before zoom  was really a big thing in browsers the base font   size was the only way you could really change  the text size. so even though zoom does work   I think because we still have the browser  base font size in our settings I think it's   best that we allow users to be able to control  the font size using that since it still exists. so we mentioned that pixels are absolute  units meaning they don't change relative   to anything else. 16 pixels is always going to be  16 pixels no matter what. and rems are a relative   unit because they are based on something else.  they're based on the browser base font size.   and you may have also heard of em "E M" units  which are sort of similar to rems but they're   a little bit different. and as a quick bit  of history trivia you might be wondering you   know where the heck did the name em and rem  come from like do they stand for something?   well they're actually not acronyms really. the em  gets its name from way back in the day when you   know type involved using metal blocks and printing  presses and things like that. and one em unit was   traditionally defined as the width of the capital  letter em for the typeface and the type size.   nowadays of course em and rem units aren't based  on the size of the letter M but they're still   dependent on something else which is why they're  called relative units. so about the em unit,   em units are different from rems in  that they're based on the font size of   their parent element. so let me show you what  I mean so let's go back to desktop mode here. and let's go into our code. so in my code  I'm going to change the h1 font size to two   em's instead of two rems like we had originally.  and then for desktop I will change it to four em's   instead of four rems. and if we go back to  the website everything looks fine. however   what if we set a different font size on the parent  element of this h1 tag? so we can see here in our   inspector the h1 tag is a child element of the  main tag. so I'm just going to make this change   here but for the main selector what if we set the  font size to something else so let's say font-size   0.5 rems which is equal to 8 pixels since 1  rem is 16, half of that is 8 pixels. so you   might have seen the h1 tag got smaller. so if I  uncheck it it's this is the normal size that we   want and now it's like half the size. and if we  go to the h1 tag and we look at the computed tab   it says four em's for font-size. computed it  is 32 pixels instead of 64 like it was before.   so the reason for this is because when you're  using em's one em gets set to whatever the   parent font size is. so the h1 tag which is set  to four em's it's basing itself off of the font   size of the main tag which is 0.5 rems which  means 1 em on the h1 tag is equal to 8 pixels   and since it's set to 4 em's 4 times 8 is 32  which is why the computed final font size of   the h1 tag is set to 32 pixels now you might  be thinking this is kind of complicated and I   actually agree with you um this kind of weird  multiplier effect is not something that I really   want to work with and you know if you work with  em's you might have some unexpected results like   this here the headline tech the headline text  is much smaller than we would have expected   so this is one reason why I personally like  using rems not em's even though em's are a   relative unit and they're accessible so if you  want to use em's you're more than welcome to but   my personal preference is to use rems so I'm  actually going to go back to rems for these and then now we're back to the sizes that we  wanted for the h1 tag 64 pixels now there is one   thing you might have noticed in my code that my  media queries are written in ms but didn't I just   say I don't like using ms that's true um media  query breakpoints are the only place that I use   em units and the reason for this is because I  read an article which I'll show you by zell liu   here an article saying that for  media queries the best unit to use   is actually the em because if you use  rems there is some kind of safari bug   that makes it not trigger at the right time  so I don't know if that's still the case   if you're aware of this bug and if you know it's  been fixed I guess let me know in the comments but   just based on this article I just use ms in  my media queries and it's basically the same   um and you know that it's always going to be based  on the browser base font size because there's no   you know parent element or whatever for the media  query okay so how do we use rems and what's the   easiest way to do that it is a little bit tricky  with the math because if you've watched any of my   previous or older sort of live coding videos you  may have noticed that I would like always pull   out my calculator and have to multiply or divide  things by 16 to get between pixels and rems and   it is kind of a pain um in the past there was this  sort of hacky workaround where you would set your   font size in the root in the html element to  instead of 100 you'd set it to 62.5 percent   and what that is is I will pull out the calculator  here but um it's 62.5 of the base font size from   your browser so that's 16 pixels the default in  the browser times 0.625 and that equals 10. so   doing this will make one rem equal to 10 pixels  and it's a lot easier to do math based on 10.   so if we go back to our typography.css file  instead of having to do math and be like oh   I want this to be 32 pixels but how do I get  that I divide it by 16 to get the two rems   instead you want 32 pixels so what you can do  is just say 3.2 rems you're dividing 32 pixels   by 10 to get 3.2 rems in the same way you  can do this with 64 pixels will be 6.4 rems   and this is all because of the 62.5 percent that  we set um on our route so let's see how that looks   in our website okay things look really different  I didn't change the paragraph tag so let's just   go back and do that really quick so paragraph we  want to be 24 pixels so I'm going to say 2.4 rems   and now things should look back to normal right so  now in the h1 tag we can see that it is 64 pixels   and in the rules it's 6.4 rems so this is working  um however this was kind of a workaround that came   about you know when you were still using straight  up pure css files nowadays with sas um I use a   different approach and let me show you that now  so let's first change everything back 1.5 rems 4 and 2 rems and then I will remove this and  make it back to 100 so what I use is I use a sas   function so I have this in my functions on scss  file I got this off of css tricks as you can see   I've put a little comment there but what  this is doing is it's creating a function   rem and the rem function can take one parameter   and in the parentheses you just put the number  in pixels that you want the final font to be   and I didn't use that earlier because you know I  just wanted to show you directly what the actual   rem styles would be but let's say we didn't have  that and we want the font size to be 32 pixels   but we don't want to have to calculate to rems  so rem function 32 and then in the same way we   can do this instead of having to calculate  what 64 pixels to rems is we can use rem   and then 64. and I'll do the same thing for the  paragraph tag we'll say rem 24 so we'll save that   and go back to our website and it looks pretty  good right so h1 tag is set to four rems   because the when we compile the sas css it will  calculate and put the final value in rems for you   and it's at 64 pixels and then if we  check the paragraph it is 1.5 rems and   then that computes to 24 pixels so personally  I like using this rem function over the 62.5   sort of hack I guess um you know I don't want to  like negate it or whatever because I do think it   is very handy if you don't want to you know use a  whole sas function or you're working in pure css   but this is you know just my preference so I  figured I would share that with you all here   so I hope this video helps clear up you know why  I use rems and why you really shouldn't be using   pixels in your styles especially for font sizes if  you are interested in hearing more about sas you   might like my video that I made recently about how  to use the new use and forward rules with the new   sas syntax and you can also check out how I set  up my sas workflow in a real world website project   so if this video helped you feel free to  leave a comment and also consider joining   my YouTube members if you're interested  in that um you'll get perks like a custom   icon next to all your comments or even  in the live chat when I do premieres   and I also have an early access tier where  you get to see new videos before they get   released to the general public so thanks for  watching and we'll see you in the next one

Channel: Coder Coder

Views: 15,605

Keywords: web development, html, css

Id: dHbYcAncAgQ

Length: 16min 11sec (971 seconds)

Published: Mon Sep 13 2021