7.5 em - Video Tutorials & Practice Problems

<v Michael>We ended the last section,</v> on percentages, by mentioning the M unit, which is really useful, it's another relative way of sizing things. It's named for the letter M, it historically was approximately the width of the letter M, it's spelled EM, I can just do that here, it's spelled like this, we'll be using plenty of these, but this is really the preferred way, to define things like font sizes, right? <v Male Instructor>Right, and the way that it works,</v> is that when you see one written, like if we change this H2 that's in the CSS, from 30 pixels to let's say 2M. That 2M is actually a percentage. So in the last section, we were talking about how percentages were like Ms and this is why. So that's saying 200%, and what that's basing, the size off of is the parent container. So if the parent container has a font size set, then it'll use that font size and then it'll double it because we said two M, so 200%. But if that parent container doesn't have a font size set, then it looks up one more parent container and then one more and ultimately, if no font size is set, it'll get to the HTML element and if nothing is set there, it'll use the browser default font size, which happens to be 16 pixels. <v Michael>Okay.</v> <v Male Instructor>So in this case,</v> because we have nothing set, it's actually 30, it's the equivalent of 32 pixels. So if Michael changes this to 32. <v Michael>Yeah, it should be exactly the same.</v> <v Male Instructor>Yep.</v> <v Michael>Oh, look at that.</v> <v Male Instructor>So it's relative in that,</v> it's based off of a parent container, but ultimately deep down there is actually still, an absolute value somewhere. So it's kind of funny when people say that, you know, oh, never use absolute things. It's everything is kind of absolute, but just not, not always directly. <v Michael>All right.</v> The example in the text we have is a bio copy. We change just this font size here. So let's try that out. We actually don't have a CSS rule for that yet, do we? <v Male Instructor>Nope.</v> <v Michael>We have one for the link,</v> but not for the text. And you can use half an M, so 0.5 M. And what is that gonna give us here, let's take a look. <v Male Instructor>It's gonna make very small font.</v> <v Michael>Just tiny.</v> <v Male Instructor>So that is.</v> <v Michael>So why is it so small?</v> <v Male Instructor>It's so small because right now,</v> that is 50% of the browser default, which is 16 pixels. So that's the equivalent of eight pixels in height, which is unreadably small. <v Michael>Right, but we can change the font,</v> for the wrapper, by going to this bio wrapper that we left empty, at the end of the last section. So we've got, let's say, make this 24 pixels. Oops, 24. And so then this will be 12. Is that right? So this is going to be 24 is the wrapper and then half of that should be 12 pixels. <v Male Instructor>Exactly.</v> <v Michael>Still pretty small,</v> but not quite as tiny. <v Male Instructor>Right.</v> So one thing that's really important here, is that these values are cumulative. So what that means is that, if you have an M sizing that looks to a parent and there's another M sizing there, it will look up to the next parent and then filter everything down and that can create situations where you have, really, really huge font are really, really small font because each one of those steps can be multiplicative. So we'll do an example of that here, where what we'll do is we'll set the bio box font size. So this is the parent container for bio copy. <v Michael>All right, so this is here.</v> <v Male Instructor>So if we set that to font size 0.5 M,</v> what that does is now the parent of bio copy, will have 12 pixels, which makes bio copy half of that, so six pixels, which will be absolutely tiny. <v Michael>So I'll take a look at this.</v> Yeah that's really small. <v Male Instructor>Right and so this goes,</v> the other direction too, where if we were to change these two, be enlarging the font, so 1.5, instead of just 0.5. <v Michael>Yeah.</v> <v Male Instructor>We would get absolutely gigantic font.</v> So this is a thing that you really have to be careful with. <v Michael>Yeah.</v> <v Male Instructor>With relative font sizes,</v> because it can get out of control really fast. <v Michael>Yeah.</v> <v Male Instructor>So if you're designing modules,</v> that are gonna be placed into other places on the site, you need to be aware of how your fonts are being styled because let's say you have something that's all relative and you drop it into a spot on the site that has, you know 0.5 M well then everything, inside your module that you just made, is gonna shrink down really tiny. Like maybe way more than you expect. <v Michael>This is also a good example of,</v> how it's nice to organize your CSS like this. You can see, we have all our bio styles in one space here. And so we can look at this and say, well this is 1.5 M well, 1.5 of, of what? Well, it's 1.5 of the bio box, which is 1.5 M and then we can go up to the bio wrapper. So, because they're right next to each other in the file, we can calculate it more easily. <v Male Instructor>Right, and so in this case,</v> like you might also be wondering, well why use these relative fonts? And the answer is that it's actually nice, for when you're changing your styles. So if you're making something that is adapting to fit, between a desktop and a mobile device, you can make changes to the styles and we'll talk about this later in later sections, but you can insert changes, so that on a mobile device, you can change, let's say the bio wrapper's font size. And if everything is relative, to the font size of the bio wrapper. <v Michael>Ah, yeah.</v> <v Male Instructor>Then you'll, you only have to change,</v> one number and suddenly it looks great, on mobile or great looks great on desktop. <v Michael>Yeah, that's really convenient.</v> <v Male Instructor>Right.</v> <v Michael>All right, well, for now,</v> we're going to make this just one M and are we keeping the other ones the same? It looks a little big. All right let's also change this font size here, in the bio box to one M. There we go and that looks a little better. <v Male Instructor>Yep.</v> And we'll be changing that in the next section anyways and editing these font sizes. So this isn't gonna be permanent. So we'd be remiss if we didn't mention the fact, that this value, the M value can be used, for things that aren't fonts. So you can use them to size any element on the page and you can set margins, you can set widths, you can set heights, you can use it for whatever you want, but it's a little tricky because what you're basically using, as the basis of your sizing for these elements, is the line height. So remember that M is changing the size of font. So if you're setting a width of like a padding, like in this image, you're basing it, off the height of the font, which is a little bit weird. <v Michael>Yeah that is strange.</v> <v Male Instructor>But once you get used to it,</v> the idea here and the reason why you might wanna use this, is that if you're changing the size of your font, you also might want the margins, within elements or padding to change, in proportion to the font. But at the same time, the caveat here, is that there are also times where you might not want that, you might just want to have a font change and then use absolute sizing like pixels or some other values, that we'll talk about in a little bit. So that just the font changes and then you don't have your elements on the page, moving around in height or padding or margin. So it's, it can be used for those things. Some people definitely do use that, you'll see it and especially people who are anti-pixel fundamentalists, will say, you know, of course you gotta do this. But to me, it's one of those things, where it's like, I need to consider, I need to consider how I want this page to respond, to changes in the browser, changes in usage. It's more complicated is basically what I'm getting at. <v Michael>Okay.</v> Yeah, definitely holy war territory here. (both giggling) But it seems like as usual, it's a matter of judgment. <v Male Instructor>Exactly.</v> <v Michael>Cool.</v> <v Male Instructor>And such wonderful holy warriors,</v> that we have here, they truly look like fine specimens, Marshall prowess on here. <v Michael>That's right.</v> All right, well, Ms are certainly useful, but there are sometimes where we wanted to have, a sort of a more absolute way of doing, a similar thing, right? <v Male Instructor>Right, but still be relative.</v> <v Michael>Okay, well,</v> so let's take a look at that in our next section. <v Male Instructor>Right.</v>