What is the difference between PX & EM & REM font sizes

Hi everyone, this video we're going to talk about why you can't use pixels for font sizes anymore. We're going to use rems and ems. And yeah, we'll look at the differences between them, how to calculate them, and in this video I get real self conscious about my accent. I feel like I have a really neutral accent until I start talking about rems and ems. You're like, "You don't have a neutral accent, Dan." I feel like I do. International man, side note, you know, if I introduced myself in Ireland, and I say, "My name is Dan," they always say, "Hi, Dean." Yep, I get text messages, "Hey, Dean, I'll see you on a weekend," My name's Dan, Dan. So I'm Daniel in Ireland, mainly, stuff you don't need to know about, let's get in, rems, ems, pixels. 

First up let's close down what we're up to now, just we're going to move this in its own little document, because we're going to do a little bit of an experiment. So let's go to 'File', 'New', I'm going to save this one, and I'm going to call this one 'Font Craziness', by HTML. Now we're going to be dealing with fonts, because it gets used quite a bit for those but it's a measurement in general. You can use it to size boxes. Let's add all of our regular doc type stuff, and down the bottom here let's throw in a couple of things. 

Let's throw in two P-tags. Put your name in them, duplicate them. Now, have we done duplicating before? If not, we'll cover it again. You hold down the 'Shift' key, then you hold down, on a Mac it's the 'Option' key, and on a PC it's the 'Alt' key, then hit the 'down arrow', that duplicates the line you're on. So we've got two of them, let's call this one, what shall we call this one? Let's give this one a Class, and let's call this one 'Bad size'. And this one here is going to have a class of 'Good Size'. So up the top here we're going to style it. You should use an external Style Sheet but we're going back to old-school. We're just going to style it in the Head here, just to make it easy. 

So let's style both of them. Up until now we've been doing, we've been styling them, saying Bad Style, bed size, is, font size is, let's say we want it to be, I don't know, 30 pixels. Unfortunately that's a bad size. Pixels are what's called absolute fonts. They're the same on all the computers, and they can't be changed. They're like, you have to be 30, pixels is an absolute font, can't mess around with them. What we need is something called a Relative Font, and that's where ems and rems come in. So let's just check what's going on first, let's preview in a browser. Close it, make it open again. 

So we've made him 30 pixels. So instead of using pixels, let's do another font, let's do, this one's the good size, and this one here is going to have the font size of, we're going to use, let's say 3 rems. Those are the used rems, there's ems and rems. We'll talk about the difference of the two, but rems is what we're going to be using, and probably the most common, contemporary common thing to use. Now let's see what they look like first, then we'll talk about what they are. So saving it, preview in the browser. What I might do for this video is just have it here, so that we can all see everything. Nice. 3 rems is bigger than 30 pixels. What is that? A rem or an em, they have, they're very common, they're very similar at least. So 3 em or 3 rem, doesn't matter, they are three of whatever the default font size is on the browser. 

So the browser, if I put in a P-tag with nothing in it. So a P-tag, and I put in 'Daniel Scott', down the bottom here, that is the default font size. I didn't style it, I haven't done anything to it. That is just a size, and it is 16 pixels, generally, about that. Different browsers have slightly different looks to their font, but Google Chrome, which we're using is, 16 pixels as its default font size, okay, 16. What a rem, or an em does is it says, I'm three times whatever the default is, so 3 times 16 is, all right, I can't do Math about as well as I can spell. It is 48, so 3 rems at the moment, that is 48 pixels high. 

Why do we do that rather than that? Because we could just type in 48, and it should be the same, right? 48 pixels, same size, just type 48, heaps easier. Now the reason we do this is for people that are, that have a hard time seeing the site. So say that I am visually impaired and I just find that too small. The default font size is way too small. I can go into Chrome and say, Preferences, and I can say, actually in here, I'm going to say, I'm going to make it bigger, I'm going to make it very large, because that's what I need, just what I need to see things. What you'll notice is, very large, let's go and check out our document. Now what ends up happening is, this guy got bigger, this guy didn't, remember, they were the same size. Let's check that, Settings, let's put it back down. Medium. So they're exactly the same size, I've said, you be 48, and you end up being 48, but actually it's more just times in the default, or as I make it bigger, it gets bigger for me. 

You can see, if I'm visually impaired that is not good, this is great, okay? So that's what happens, that's the reason that Google really wants to encourage it. So we'll use this so that people can use our site better, and one of the other reasons is that Google will base your site on how accessible it is, for people that need kind of some, you know, this extra help. So, again back to rankings, if you're building your site, you want Google to love it so that it ranks you, and one of its measurements, along with a million others is, is your site accessible to the people, that need kind of these changes made. So that's why we use rems or ems. 

Watch this, if I change this 3, actually, let's go back to our regular size, Normal, and in here, the same size, if I change this through from rems or ems, it's not going to change. We'll talk about that next, the difference between rems and ems, before then, you need to get over my accent, because rems and ems probably sounds real bad. I know, it's my accent, and I know, rems and ems sounds weird. Rems, ems, there we go. 

All right, this is going to be a bit of a brain bender. So let's get started. So let's-- we got those two, let's just get rid of this P-tag here. Save it, that's gone. So let's say that I have got a P-tag down the bottom here, tap across. It's going to have a different word in here, it's going to have pickle, just because. So this pickle, I would like to give it a Class of, I've already got some classes, I'm going to use, let's say, bad size, no, good size, we don't want to use bad sizes. So I've got a good size. Looks exactly the same as the rest of these, but we know that on a website we have Body tags, but we never just have P-tags hanging out by themselves, right? They're also inside containers, which are inside main tags, which are inside sections. 

So let's say this guy is inside a tag. So I'm going to put a tag around the outside of him. I'm going to call this tag 'My Box', and I'm going to grab the Div tag, so it opens there, and it closes on the other side. Tab him in, make it all look pretty. Cool. We're okay with that, so I've got-- this guy is inside a Div called My Box, looks the same. Now let's style this My Box, so, My Box, here we go. And let's say that-- good size, bad size, let's say we're using ems. So we're using ems, looks exactly the same. This is where the difference comes. 

I want my box though to do some stuff. It's going to do some things for me, it's going to say I am going to do 2 ems. So what ends up happening is, they end up compounding, so my box is 2 ems, and then good size applies itself as well. So we end up with 5 ems, like, compounds up. The difference is, if I just use rems. So good size now, if it's a rem, it ignores the wrapper tags size, and just goes, it says, "I don't care what you do, or what the rest of the world is telling me to do, I am going to go right back to the source," so R is root, so root em. It goes all the way back to the beginning and says, "All right, the default's still 16, so I'm 3 times 16," whereas if you use ems you can end up with this weird, like, it's not so complicated at the level we're at now, because we don't have a lot going on, especially in this video but even in our other websites, it's just not that big, but when you get to Frameworks and WordPress, and big huge things that you're using or trying to edit, sometimes you're just like, "Why are you so big or small?" 

There's all these things going on. If you make it a rem it just says, forget all the other things you're being told, I'm just going to be three times the default. Can you just use pixels? You totally can. If you're like, "Man, that was like Narnia, I went," what was that, Inception. It's too much information, things inside things, rems, ems, his crazy accent, you could just use pixels, though your website's not going to explode, but we're just trying to be, we're trying to do two things. One is, you need to be a good Web Designer for the visually impaired, and also you're going to run into these rems and ems later on, when you're working with other sites and templates. 

Another useful thing is to know, is it useful? It's weird what sticks in my head. So what is 3 em? Say I want to pick a Body copy size for this one here, and I want it to be, I don't know, I want it to be 20 pixels because that's what I designed it in. What is it in rems? There are calculators online, you can do ems to pixels calculators, or rems to pixel calculators, but weirdly my little calculator here, I can say, if I want it to be 20 pixels, I can times it up by 0.0625. 0.0625, write it down, post-it, note it. It will give you the rems or ems, same thing. So that is what it's going to be. We use the proper ones, rems, that is 20 points. So if I want it to be 48, I type in 48 x 0.0625.

 Again, 3 rems, but that's probably, not going to stick in your head like it has in mine. So there are calculators, just Google them. They're easy to do. Know that 1 is about 16. When I say about 16, different browsers kind of treat the default font size a little differently. You notice how Google didn't say 16 pixels, it said medium. You should say 16 p, pixels, notice it says medium. So I'm going to save and close this, and we're going to go through and edit our big site now. So close this down, make this bigger, open it all up, my Explorer we need, Index, Style, because we need to go back now and fix the things we did. 

So we did our font sizes. So what I'm going to do, is I'm going to change my default font size from 16 to be a font size of, we'd already looked at it, it was 1.125, rems. You could just put 1.1, like the 0.25, the extra 25, is it really changing much, it's up to you. It's how cool you are about that type of stuff. Let's have a little look. 

So all my default font size has gone up a little bit. Let's look at this one here. In my XD document it is 52, so in here I'm going to find my H1, and I say, you-- 80 is not what I want. I'm going to do, what was it? 52? I can't remember, 52, it was, so 52, x 0.0625. So it's a little bit bigger than 3 rems. How much do I care about that 0.25? Probably not enough to worry about, but let's put it all in. Rems, let's have a little look now, and it is the right size. 'Save All', yeah, it's looking nice. At least it matches my mock-up here. 

Now one of the other things I'll just mention at the end of this is that, when I'm looking at this design here, this font feels really light. It's displayed differently than it is on my website. Where is my mockup? Disappeared, no, it's over here. Here you are, so it just renders differently. So that is the right weight because I have said up the top here, in Visual Studio Code, remember, up here I've said Roboto is 300. So it is displaying the right weight. The trouble is that XD will use Roboto 300 differently than your website will, and the weird thing is that if I looked at this on Safari, and then on Firefox, they'll all do it slightly differently. 

It's kind of, it bothers me as a designer, that fonts aren't looking exactly the same across lots of things. I guess that's the big kind of thing you need to let go of, if you are coming from more of a traditional design background, that fonts sometimes just, you just have to let things go, because you can't force the aliasing of fonts. 

One thing that kind of reminded me of is that we've only had one size in here. Let's say that you do have two, there's 300, and, what is it, 300, and 500, and 700. So you got different sizes. We didn't implement them because we didn't have to, but let's say you do have different sizes that you picked in Google Fonts. In here you can go through and say, actually, I want the body to use-- its this one here, it's Font Weight. And you say, actually I want this to be 600. That's it, 600, it will be a 600 font if you've got multiple options. I didn't have to because I've only got 1, but reminds me. 

All right, let's move on, let's fix up all of this stuff. We're being ignoring the gaps and spaces between. We'll do some padding, space after paragraphs, all that fun stuff in the very next video.