Lessons

Lesson Info

What are PX & EM & REM

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 reams and ems your like your you don't have a neutral accent and I feel like I do International man. Side note, do you know if I introduced myself in Ireland and I say my name is dan, they always say hi Dean, yep, I can text messages. Hey dan, I'll see you on the weekend. My name's dan dan. I'm daniel in Ireland, mainly stuff you don't need to know about. Let's get in Reims. Seems pixels. Alright, first up, let's close down what we're up to now. Just we're gonna 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 gonna save this one and I'm going to call this one font craziness by h...

tml. 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. Okay, you can use it to size boxes, let's add all of our regular doc type stuff down the bottom here, let's throw in a couple of things. Let's throw in two p tags. Okay, 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 and then you hold down on a Mac it's the option key on a pc. It's the key and then hit the down arrow. That duplicates the line you're on. Alright so we've got two of them. Let's call this one. What should we call this one? Let's give this one a class. Okay and let's call this one bad size. Okay. And this one here is going to have a class of good size. Alright. So at 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 gonna style it in the head here just to make it easy. Okay so let's start both of them up until now we've been doing we've been styling them saying bad style, bad bad size. Okay. Is font size Is let's say we want it to be I don't know 30 pixels. Okay. Unfortunately there's a bad size pixels are what's called absolute fonts. K they are the same on all the computers and they can't be changed their like you have to be 30 pixels is absolute font can't mess around with them. What we need is something called a relative font and that's where teams and rams come in. Okay. So let's let's just check what's going on first. Let's prevent browser close it, Make it open again. Alright so we've made him 30 pixels. So instead of using pixels let's do another font and let's do this one is the good size and this one here is going to have the font size of we're gonna use let's say three R. E. M's. Okay. Those are the used rims. There's ems and rims. We'll talk about the difference of two but rims 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 and then we'll talk about what they are. So saving it proving the browser what I might do for this video is just have it here so that we can all see everything nice. Alright so three rims is bigger than 30 pixels. Why is that a rem or an M. Okay. We they have they're very common. They're very are very similar at least so three M. Or three 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. Okay so a P tag and I put in daniel scott down the bottom here. Okay there's the default font size. Okay I didn't style it. I haven't done anything to it. That is just a size. Okay and it is 16 pixels generally about that. Okay. Different browsers have slightly different looks to their font but google chrome which we're using is 16 pixels. Okay as its default font size. Okay 16 what a rim or an M does is it says I am three times whatever the default is. So three times 16 is all right. I can't do math about as well as I can spell It is so three rings at the moment. Okay, that is 48 pixels high. Why do we do that rather than that? Because we can 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. Okay. So say that I am visually impaired and I just find that too small. What you know the default font size 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. Okay, I'm gonna make it very large game and 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. Okay, let's check that settings. Let's put it back down. Medium. Okay, so they're exactly the same size. I've said Ub 48 and you End up being 48 but actually it's more just times in the default whereas I make it bigger. Okay, 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. And that's the reason we, that google really wants to encourage it. Okay, 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 a site you want google to love it so that it ranks you and one of its measurements. Okay. 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 rims or teams watch this. If I change this three, uh actually let's go back to our regular size. Normal. Okay. And in here no one in here, the same size. If I change this through from reims or reems, it's not going to change. We'll talk about that next. The difference between reams and reams, but before then you need to get over my accent because reams and reams that probably sounds real bad. I know it's my accent and I know reams and reams sounds weird rims. Ems. There we go. Alright, this is going to be a bit of a brain bender. So let's get started. So let's got those two. Let's just get rid of this P tag here and save it. So it's gone. Okay, so let's say that I have got a P tag down the bottom here. Okay, tap it across. Mm hmm. Okay. And it's going to have a different word in here. It's gonna have pickle just because Okay, so this pickle I would like to give it a class of We've already got some classes I'm going to use let's say bad size, no good size. We don't want to use good bad sizes. So I've got good size so it looks exactly the same as the rest of these. But we know that on our website. We have body tags. But we also we never just have P tags hanging out by themselves, right there also inside containers which are inside main tags which are inside sections. So let's say this guy is inside attack. Okay. So I'm going to put a tag around the outside of him. I'm going to call this tag my box. Okay. And I'm gonna grab the div tag 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 start as my box. My box. Alright folks, here we go. And let's say that's a good size. Bad size. Let's say we're using teams. Okay, so we're using games looks exactly the same. This is where the difference comes. Okay, I want my box though to do some stuff. Ok, It's going to do some things for me. It's going to say I am going to do two innings. So what ends up happening is they end up compounding. So my box is two M's and then good size applies itself as well. So you end up with five ng sort of like compounds up. The difference is if I just use rims so good size now if it's a rim, it ignores the wrapper tags size and just goes and says, I don't care what you do or what the rest of the world is telling me to do. I'm going to go right back to the source So our is route So route. Um, okay. It goes all the way back to the beginning and says, alright, the default still 16. So I'm three times 16. Okay. Whereas if you use ems you can end up with this weird like it's, 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. It's sometimes you're just like, why are you so big or small? There's all these things going on if you make it a rim, it just says forget all the other things I've been told I'm just going to be three times the default now. Can you just use pixels? You totally can. Okay if you're like, man, that was like Narnia. I went, what is that inception? There's too much information. Things inside things. Rams Ems his crazy accent. You can just use pixels. Your website is not going to explode but we're just trying to be, I'm trying to do two things. One is, you need to be a good web designer. Okay for the visually impaired. And also you're going to run into these rooms and ems later on when you're working with other sites and templates and another useful thing is to know is it useful? It's with what sticks in my head and no, so what is three am say I want to pick a body copy size for this one here and I wanted to be, I don't know. I want it to be 20 pixels. Okay. Because that's what I designed it in, what is it in rims there are calculators online. You can do ends two pixels calculators or rims to pixel calculators. But weirdly my little calculator here, I can say if I wanted to be 20 pixels, I can times that by oh 6 to 5. Okay .06-5 write it down. Post it noted. Okay. And it will give you the rims or ems okay. Same thing. So that is what it's going to be. We'll use the proper ones rims. That is 20 points. Okay. So if I want it to be 48. Okay. I type in times .06-5 Again, three rims but that's probably not going to stick in your head like it has mine. So there are calculators just Google them. They're easy to do know that one 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. Okay. Used to say pixels, notices medium. Alright. 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. Okay. Because we need to go back now and fix the things we did. Okay, so we did our font sizes. So what I'm gonna do is I'm gonna change my default font size from 16. Okay. To be a font size of font size Of, we've already looked at it. It was 1. rims. Okay. You could just put 1.1, like the .25. The extra 25 isn't really changing much. It's up to you, how 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 XT document, it is 52. Okay, so in here I'm gonna find my H one and I say you, it is not what I want. Okay, I'm going to do what was it? 52. Okay. Remember 52 was so times point oh 6 to 5. Okay, so it's a little bit bigger than three rims. How much do I care about that? .25? Probably not enough to worry about, but let's put it all in dreams. Let's have a little look now and it is the right size save all. It's looking nice. At least it matches my mock up here. Now. One of the other things I just mentioned at the end of this is that when I'm looking at this design here, this font feels really light. Okay. Um, you know, it's displayed differently than it is on my website. Okay, where is my markup disappeared? No, it's over here. You are. So it just renders differently. So that is the right weight. Okay, because I have set up the top here and video visual studio code. Remember up here, I've said Roboto is 300. Okay, so it is displaying the right weight. The trouble is that XD will use roboto 300 differently than your website will. Okay. And the weird thing is is that if I look at this and safari and then on firefox they'll all do it slightly differently. It's kind of it bothers me as a designer and 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. And 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 to, there's 300 and um 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 want the body to use, it's this one here, it's font font weight. Okay. And you say actually I want this to be 600. Okay, and that's it. 600. It'll be a 600 font if you've got multiple options, I didn't have to because I've only got one. But that reminds me All right, let's move on, let's fix up all of this stuff whether we've been ignoring the gaps and spaces between. We'll do some petting space after paragraphs, all that fun stuff in the very next video