Em Units

In CSS, relative length units are relative to other length values. 0:00 And the most commonly used relative unit, is the em unit. 0:04 The em is what's called a font relative unit, 0:08 because it's calculated based on a parent elements font size. 0:11 So, anytime we give an element's property, a value of one em, 0:15 that 1em is equal to the font size value, of the parent element. 0:20 So, for example, the default font size for most browsers, is 16 pixels. 0:25 So, if we set our page's body font size value to 1em, 0:31 this is the equivalent to setting the font size value to 16 pixels. 0:37 So here, by default, 1em is equal to 16 pixels, 0:43 2ems would then be equal to 32 pixels and so forth. 0:48 So now, if we wanted to find the font size of our header title in ems, let's 0:53 scroll down to our header rule, and let's change the 26 pixel value to, say, 3em. 0:58 So, with this 3em value, the title element is still inheriting that 1:07 font-size value from the body element, and it's multiplying it by three. 1:12 So, if we save our stylesheet and 1:16 take a look at it in the browser, now the title looks really big, 1:19 because the value 3em is making it three times that body font size context. 1:24 So, now it's equivalent to 48 pixels. 1:30 And if we go back to our stylesheet, and 1:34 change the body font size to a larger value, let's say 2em. 1:37 When we save our stylesheet and take a look at it again, now the title gets 1:43 even bigger, because its em value scales to that larger body font size context. 1:48 Now if you go back and make the body font size smaller, let's say .5em, 1:54 and we save and refresh the browser the titles font size value is now relative 2:00 to that smaller font size of the body, so the title now looks a lot smaller. 2:07 But, let's go ahead and keep the body context at one m, moving forward. 2:13 So I'll just change the font size value back to, 1em in the body rule. 2:18 So, if we save our stylesheet and take a look at our header element, again. 2:23 So, our title's font size is still too big. 2:27 We'll need to define a smaller em value, 2:31 that's equivalent to the title's original font size, of 26 pixels. 2:34 So, how do we do that? 2:41 Well, to convert a pixel value, 2:42 to its equivalent em value we can follow a simple formula. 2:45 We'll need to divide the desired elements' pixel value, 2:49 by the parent element's font size in pixels, which again, in our case, 2:54 is the body font size, equivalent to 16 pixels. 2:59 [BLANK_AUDIO] 3:03 So, 26 divided by 16, gives us a value of 1.625. 3:06 So, next to our font size declaration, let's add a comment 3:13 to remind us the equation we used, and what this value means in pixel units. 3:19 So we're gonna write 26 pixels, divided by 16 pixels. 3:24 Now, we're gonna change the font size value to 1.625 em. 3:30 So, now when we save our stylesheet and take a look at our preview, 3:37 once again, we can see that the title is now exactly the size we need it to be. 3:41 So, now that we know how to convert pixel values to em's. 3:47 Let's also define our h1's font size, as an em-based value. 3:51 Now currently, it's set to 90 pixels, so 3:58 let's once again add a comment next to the font size declaration, 4:01 that says 90 pixels divided by 16 pixels. 4:07 And this gives us an em-based value of 5.625em. 4:13 So now we know that the em is a useful unit for creating scalable content. 4:21 Because it can adapt to other font sizes. 4:28 This way, child elements are able to resize proportionally based on parent's 4:31 font size, without us having to manually calculate and redefine all the different 4:36 font sizes for child elements, like we would have to do with pixels. 4:40 Now an important thing we need to keep in mind when font sizing with em units, 4:44 is that there is a compounding effect that happens in nested elements, so 4:48 let's go over an example of that. 4:53 So, if we go back to our stylesheet, and give the main header element, 4:55 a font size, so let's add a font size property and set the value to 2em. 5:02 Now the main header font size of 2em, becomes the new context for 5:12 our title and heading font sizes, since as we can see here in the HTML. 5:18 The main header is their parent element. 5:24 So, the title and the h1's font size, is now relative to this font size of 2em. 5:27 So now, when we save our stylesheet, and refresh the browser, 5:34 notice how the font size scales up, based on that new context of 2em. 5:39 This is the compounding effect I mentioned earlier. 5:44 So, let's stop and take a look at what is happening here. 5:47 So, the 2em font size value, we applied to the main header is equal to 32 pixels, 5:51 because it's 2 times that base font size equal to 16 pixels, up here in the body. 5:58 So this means that now our title font size is 1.6 times larger than 32 pixels. 6:06 So, it's now equivalent to 52 pixels. 6:14 And the h1 is now 5.625 times larger. 6:17 That's why it looks really big at about 180 pixels. 6:23 So these are the type of issues we need to be careful with 6:27 when working with relative em units. 6:30 This compounding effect can get pretty troublesome depending on how many 6:32 font sizes we've defined in our stylesheet. 6:36 We don't want to get into a predicament where a deeply nested em based font size, 6:39 is compounded all the way down from the root element of the document. 6:43 And we'll learn how to get around this compounding problem, next 6:47