CSS Tutorial — EM & REM, Relative Sizes (8/13)

We covered absolute units like pixel values, and we covered relative units like percentage. Now let’s talk about another super important relative unit. EM. This is mostly used to size text. Sizing your fonts is absolutely crucial in having a good looking page. It’s one of the most important aspects of UI design. Typography.
I mentioned default browser styles a couple of videos ago. Let’s look at H1 in Chrome.
H1 has this weird font-size value of 2em. That line is the reason why H1 so big without you writing any CSS. But what is that? EM?
EM is another relative unit of measurement, similar to percentage. EM always has a number in front of it. 2em, 3em, .5em.
Font-size: 2em means, hey what is my expected font-size if I didn’t have any other CSS? I want my size to be 2 times that. Twice as big. So what is my expected Font-size? Font size is usually inherited from the parent, so say I have a font-size: 12px on the body tag. And I have a direct H1 child inside it with font size: 2em. That will make the H1 size automatically 24px, double its parent. Because it’s 2EM. So it’s almost like the H1 is listening directly to its parent.
3em, 3 times that or 1em, the same size as my parent. You can even do decimal points like .5, half, 50%, .2, 20%. This is useful because you can set font-size of the body to be whatever, and all its children that have their sizing in em will listen to that and resize immediately. This way you don’t have to specify how many pixels for every single child. You define it once on the body, and everybody will resize themselves.
Except there’s one problem. EM inherits from the direct parent, not from the body. So in our example we’re lucky the H1 is directly on the body but...
if you have children inside children, they’re going to affect each other’s size. Say you have a P tag with A tags inside it. Say body font size is 20px. If my P tag is 2em, that makes it 40px, and my A tag is 3em, that makes the A 3 times as big as the P, so 40x3, 120px. This can get really confusing really fast. I don’t like it. I know a bunch of you are gonna get mad at me cuz you disagree with me, and that’s ok. You can start your own ColorCode on youTube and call it ColorChode and make your own videos and disagree.
Anyway, back to EM.
In real world applications you have several layers of elements inside one another, so it becomes really difficult trying to find out how big something is if you use relative values and have to keep going up the chain of parents and calculate. What is .7em of 2em of .5em of 14 pixels? That’s cray cray. Lucky for us, there is a solution. And it’s a solution that I personally like a lot, it’s not perfect but it covers 99% of what I want. And that is REM. Root EM, whatever EM stands for. I probably should have googled that. HAHA Actually I did, And I didn’t find a satisfactory answer. Anyway, REM is the exact same thing as EM except it’s not relative to the inherited font size from the parent, it’s relative to the root element, your beloved HTML tag. Remember that guy? This means you can give your HTML element a size. Say 14px. And any element inside your page, anywhere, regardless of who their parent is, given an REM font size, will then resize relative to 14px. This is in my opinion the cleanest way to specify font size, have it be easy to read, and still flexible like EM.
So,... I think it’s time for a demo. I just gave you aloooot of information. Let’s go back to our profile page and clean up them sizes using both absolute and relative units. I’ll see you there.