7.6 rem isn’t just for dreaming - Video Tutorials & Practice Problems

<v Instructor>We mentioned at the end of the last section,</v> when we were talking about ems that there's another way of specifying these sorts of sizes that's similar to ems but doesn't have this characteristic where it is accumulative, where it's multiplicative. <v Lee>Right.</v> <v Instructor>And so these are called rems, right?</v> <v Lee>Yeah, and there is the example</v> that I gave of if you're designing a little piece of a site that might be dropped into different places on the site, having to worry about whether or not it's in a wrapper that has an em sizing that's gonna cause everything to be all screwy, you could use a pixel value on a wrapper. So the way that we have the bio-wrapper have a font-size of 24 pixels, that would mean that if we cut out that whole section, and dropped it into something, a parent wrapper that had a font-size of 0.5em, because we have an absolute value in there, the bio-copy, it would not be affected by that 0.5em of the overall parent. So having an absolute value like that is kind of a stopping point. It cuts off that multiplicative effect. It's nice to use that in a bunch of places and you can use pixels but the problem here with pixels is that a pixel value is always exactly what it is. It's not looking at anything else. So it's always 24 pixels. There's no easy way. If you wanted to go through and change a website that uses this kind of method where you have kind of like a wrapper that has a pixel font size set, and you wanted to suddenly change a bunch of these things, you'd have to go through and find every place that used that 24 pixels, and alter that like stopping point font-size. And that's kind of a pain. So there's this other unit, which is like em but it's called the rem, which is the root em is what it means. And what this does is it works like em but instead of looking at a parent container, it looks at the font-size of the HTML element on the page. <v Instructor>Oh, okay, so the HTML tag itself.</v> <v Lee>Right, so if you don't have a font-size set</v> for the HTML, then it's 16 pixels. But what this allows you to do is it allows you to design modules where instead of saying 24 pixels right here, we could put 1.5rem and that would always be 24 pixels as long as the MTL font size is 16 pixels. <v Instructor>In this case, what we're doing</v> in the example is we're changing this here, the bio-box. <v ->Right.</v> <v ->Is that right?</v> Yeah, we're changing that to-- <v Lee>Right, to show you how it stops</v> the multiplicative effect. <v Instructor>So will this change things?</v> Yeah, so this here is giving us I guess 24 pixels, is that right? <v Lee>Correct, so this is...</v> The current setup-- <v Instructor>So here it should be 16 pixels</v> 'cause that's just the base for HMTL. <v Lee>Right, so it's kind of like a save point</v> in a video game where when you die, you go back to that. At this point, when you drop a rem in like that, 1rem, we're saying go back to HTML, whatever that font-size is, everything is based off of that. <v Instructor>Let's take a look here.</v> So it should be smaller. <v Lee>Correct, there you go.</v> <v Instructor>There we go. Good.</v> So while we're styling this part of the page, let's also change the h3 here. This is the... Inside here, these are the names. Here's Lee. There's me and let's not leave out Nick. That's our co-founder. And let's put it in here. It's gonna be... It's more specific. So it's a bio-box style but it's one of the tags. So it should be under here. And is this the kind of thing that you just kind of play with it to get something that looks good? <v Lee>Exactly.</v> So in this case, it's a header. So we're making it 50% the size of the copy. So typically, you want your headers to be bigger than the copy 'cause they're supposed to be more visible. <v Instructor>Right.</v> <v Lee>So what we're really just showing here</v> is how this is now based not off the 24 pixels of the bio-wrapper but off of the 1rem of the bio-box. <v Instructor>Right, and so...</v> Oh, I got it. So this is 1.5em. It's basically one and a half times this, which is equal to, in this case, 16 pixels, but that's just the size of the HTML font. So if we change it up here, like this, say to something a little bigger, 18 pixels. Then now this here will be 18. <v Lee>Right.</v> <v Instructor>And then this will be I guess,</v> it will be 1.5 times that. <v Instructor>There you go.</v> So what you're showing right there is how you can use this rem to change the font size in a whole bunch of places. So because these modules, like the bio-box is based on... The font-size is based on the HTML size, if you do this all over your site and you're happy with the proportions, the font-size proportions between all the different segments of your site but then you wanna make everything a little bit bigger or everything a little bit smaller. Now you only have to edit your CSS in one place. All you have to do is change that HTML number and now everything stays relative to each other the same size. <v Instructor>Yeah.</v> <v Lee>But it also gets bigger or smaller.</v> <v Instructor>Okay, now these here,</v> this 24 pixels, so that's not changing, right? <v Lee>No, that's not changing</v> because that's an absolute font-size. <v Instructor>And is anything being scaled relative</v> to this 24 right now? <v Lee>No because the next child element</v> is the series of four or the series of four bio-boxes and those are all set to 1rem. So they're just skipping right past that font-size. <v Instructor>Right, so that's why everything is working</v> in terms of the resizing. <v Lee>Exactly.</v> <v Instructor>Let's go back to the default.</v> We'll just leave it implicit. 16 pixels. It's really not critical to know that it's exactly 16 pixels. Just look at what it looks like. <v Lee>Right, exactly.</v> <v Instructor>Still, it's useful to know.</v> <v Lee>You don't have to do the math.</v> (Lee chuckling) <v Instructor>Yeah, no, I didn't know that offhand.</v> Yeah, it's a good point actually. We're doing a little math here but ultimately, it really comes down to just looking at the page and saying well, does this look good? <v Lee>Exactly.</v> That's a very important point. <v Instructor>Yeah, so don't get caught up</v> in doing all this math and trying to get all the propositions and ratios exactly right. Like no, just look at it, does it look good? Is it the kind of thing that is legible and conveyed as the kind of meaning that you want. <v Lee>Exactly.</v>