Rem Units2:57 with Guil Hernandez
The rem unit is similar to the em unit. The difference is that rem is relative only to the root element of the page. This gets us around the compounding font size issue we experience with em units.
So, to get around that em font size compounding issue, we experienced in 0:00 the previous video, CSS has another relative unit called a REM unit. 0:05 Now REM stands for root-M, and it's similar to an em unit, 0:11 the difference is that it's only relative to the root element of the page, 0:16 not any parent element like EMs are. 0:21 And by a root element, we're referring to the HTML element. 0:23 Now we're not gonna get too specific with REMs in this course. 0:28 All we need to know here is that REM units, 0:32 are not affected by inheritance the way ems are. 0:34 So they're able to help us out of a pinch, when font sizing and ems start to compound. 0:38 So, watch what happens when we change the em units in our h1 title elements, 0:43 to rem units. 0:49 So, in our style sheet, we'll scroll down to our h1 rule, and 0:50 instead of the font size value being 5.62 em, 0:55 we're going to define it as 5.625 REM. 0:59 Let's scroll down to our title rule, and 1:04 we're going to change the font size value to 1.625 REM. 1:08 So now, when we save our style sheet, and 1:16 go back to the browser preview, and refresh the page. 1:18 Notice how it sort of resets the font sizes for us. 1:22 So now, the font size of our title and h1, 1:25 are no longer relative to that 2 em font size of main header. 1:29 They're actually now relative to the default 16 pixel font size, 1:36 of the root HTML element. 1:41 So now our title and h1 elements, 1:44 are back to having a font size equal to 26 pixels and 96 pixels respectively. 1:47 So this is what's great about REMs, they're more predictable than ems, 1:54 since they always relate back to the root element. 1:57 So, let's actually go ahead and remove the example font size declaration of 2m, 2:01 in our main header rule. 2:07 So, now that we have a better understanding of many of 2:10 the different units, used to define a length or measurement value. 2:12 Which ones should we use? 2:17 Well, it's always best to use what we feel comfortable with, and 2:19 what works best for a particular project. 2:23 Pixels are more precise, easier to understand and 2:26 predictable, but we're also sort of locked in to those values. 2:29 Now if we're creating a purely typographic design, or a design that needs to 2:33 scale and adapt fluidly, across different devices and screen sizes. 2:38 Units like percentages, ems, or REMs will work more consistently in those types of 2:42 projects, and for sizing text I definitely recommend using ems over pixels. 2:47 You can learn more about these units, in our web typography course. 2:53
You need to sign up for Treehouse in order to download course files.Sign up