EM & REM

Last Updated: February 4, 2023

EM & REM

The two most commonly used relative sizing metrics in CSS

We covered absolute units like pixel, and we covered relative units like percentage. Now let’s talk about another super important relative unit: em.

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. For example: <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 em?

em is another relative unit of measurement, similar to percentage.

em always has a number in front of it. __2__em, __3__em, __.5__em.

font-size: 2em;

The line above 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. For example:

<body>
    <h1></h1>
</body>

body {
    font-size: 12px
}
h1 {
    font-size: 2em;
}

This 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 is 3 times that or 1em is the same size as my parent. You can even do decimal points like .5, half, 50%, or .2 which is 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. 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. Consider this:

<body>
    <p>
        <a></a>
    </p>
</body>

body {
    font-size: 15px;
}
p {
    font-size: 2em;
}
a {
    font-size: 3em;
}

This treanslates to font-size: 90px (15 x 2 x 3) for the <a> tag. This kind of system 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.

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.

REM

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.

This means you can say:

html {
    font-size: 16px;
}

and any element inside your page, anywhere, regardless of who their parent is, given an rem font size, will then resize relative to 16px. 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 a lot 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.