rem vs. em Units

[00:00:00]
>> Is it preferably better to use the rem instead of like or pixel?
>> Yes, I like ramps, and I'll show you why. So I'll do the CodePen that I do for a lot of courses here. So I'm going to set this up. I'm gonna set up an h1, and I'm going to say practical CSS layouts.

[00:00:26]
And then I'm gonna put in a paragraph and I'm gonna say Jen Kramer. And then in my CSS I'm gonna set up my H1. I'm gonna set up a quick style here. Let's say I have a background color of green and a color of white, okay? And then in my paragraph, I'm going to say a background color of blue and a color of white.

[00:00:58]
Super simple. And because I can't stand it, body, font-family, arial, so ugly. Okay, so here we are we have an h1 and we have a paragraph, right, and they have you can see the backgrounds around them, okay. So what I'm going to do now is I'm going to apply a font size from my body and then I'm gonna apply it here to practical CSS layouts and to GenCramer.

[00:01:34]
I'll apply to both of those because font size is something that inherits. And what I'm going to do, actually not font size. I'm gonna do padding. Padding. And I'm going to set this to be 1rem. When I set this to. [INAUDIBLE] Apologies. Let's just do it this way.

[00:02:01]
Padding, 1rem, and paragraph. Padding, 1rem. Pretty much as you'd expect, right? Same kind of padding on both of these. You can see that the text is lined up here on the left-hand side, okay? That is because a rem stands for what?
>> It's a relative type measurement, but relative to the root.

[00:02:29]
>> Relative to the root. Root relative. Cool, that really helps. What is an? [LAUGH] Anybody know what an is?
>> Isn't it like the pixel size of like literally a letter.
>> It is literally the size of a, I think it's a lowercase letter okay. The lowercase letter, letter which is kinda fat, that is gonna be defined as one of those things, all right?

[00:02:57]
So if I take the r from my rem, and I set the padding to 1em, guess what happens? Those things are different, aren't they? Why is that?
>> Is it cuz the font size are different?
>> Cuz the font sizes are actually different. They are relative to the letter and the H1 as we know by default has a bigger lowercase letter than the paragraph does, right?

[00:03:29]
And the spacing is scaled accordingly. Okay, so that's why you get different things. So what I find is that as I teach, I work with rems, they give us the flexibility, the wonderful flexibility that's great for responsive design and they are consistent. Instead of worrying about what's happening exactly in space.

[00:03:56]
Make sense?
>> Yeah.
>> So what is the, when it's relative, what is it? It didn't look like the paragraph padding changed.
>> Right?
>> So what is the-
>> What's it relative to? That is the best question, and that is something I am going to ask you a lot.

[00:04:15]
>> [LAUGH] What is it relative to? In this case it's route relative, so this is the size of the HTML elements text, it is set usually by the browser to 16 pixels. So 16 pixels is generally 1rem.
>> Our paragraph is set to 16 pixels, so you actually you didn't see that change.

[00:04:36]
>> Okay.
>> Can you talk about the benefits of rem from an accessibility standpoint?
>> Yes, so any of these units of measure that are relative, percents, ems, rems, that type of thing. As you enlarge things for your screen, if you decide to blow up the magnification of the page, everything scales proportionately.

[00:05:00]
Because you're scaling that root level size. So you're going from 16 pixels to 18 to 20 to 22, right? It's getting larger and larger and larger, and your whole page scales consistently. As opposed to things not scaling consistently and you wind up with a wonky-looking page. Make sense?

[00:05:20]
>> Question about resetting. I see people that will change the size to match, like one pixel. 10 pixels equals 1rem or something like that.
>> Yes.
>> Is that something you recommend?
>> That's an old trick. It's been around for many, many years. And I think people do that because they're trying to make their math easier, that they're not thinking about things in base 16.

[00:05:43]
So, yeah. Yep?
>> So is relative to the parent, and rem is relevant to the root?
>> Correct, correct. is relative, actually not even the parent to the element that we're looking at at the moment, in this case the H1. Because H1's parent is body, and body has got 16 pixels, right, for the font size.

[00:06:05]
So it's actually the actual element itself, and rem is relative to the root. And we're gonna see how this is important here in just a moment, okay, yes
>> Are you saying that by default the browser says that 16 pixels is the rem unless you say that some other element is the root.

[00:06:23]
>> 16 pixels is the root font size that the browser has set unless we decide we wanna change it.
>> Okay, and you would do that in the,
>> And we're gonna do that coming right up, [LAUGH]