DEV Community

loading...
Cover image for What even is em?

What even is em?

kaylasween profile image Kayla Sween ・3 min read
While it's best practice to use em or rem when defining font sizes, it's common for developers to be unsure of which one to use or even how each of them work. In this post, we'll go over what em and rem are and their differences so that you can pick the one that best suits your needs.

Before posting this blog, I did a little quiz on Twitter. Here are the results from that poll:

Only 12% of people answered with the correct answer. I knew em confused me, but I didn't realize it confused a lot of other people as well. So let's dive into what em and rem are and how they work.

EM

In CSS, em is a unit that is relative to the font size of the element. If the element doesn't have a specified font size, it will inherit its parent's font size. I like to think of em as standing for the "element's measurement."

Let's use a button as an example.

button {
  font-size: 2em;
  padding: 1em;
}

In this example, we'll assume the button is inheriting a 16px font size. This would originally make 1em = 16px.

So far, so good.

When we change the font size of the button to 2em, the element's font size changes from 16px to 32px (or 2em). This also makes sense. The confusing part is what happens to padding. Since the element's new font size is 32px, this makes the button's padding become 32px, or the new value for 1em.

Yeah, CSS is wild.

REM

rem, or root em, is a unit that is relative to the font size of the root (<html>) element, which is typically 16px. Applying my own version of what em stands for to rem, rem would stand for the "root element's measurement."

Using rem, changing the element's font size doesn't change the rem value for other properties. It's always 1rem = 16px, or whatever the root element's font size is. (Note: it's probably not a good idea to override the html element's font size because the user agent stylesheet sets it. You can learn more about the user agent stylesheet in Jens Oliver Meiert's article, "User Agent Style Sheets: Basics and Samples".)

Let's revisit the example from earlier, but this time, we'll use rem.

button {
  font-size: 2rem;
  padding: 1rem;
}

In this case, the font size (2rem) is 32px and the padding (1rem) is 16px, which is exactly what you'd expect.

So which one should I use?

It depends! If this is something you're concerned about, I recommend doing your own research to see which works best for your purposes.

After doing some research, I prefer rem so that I don't have to worry about the font size of an element changing to something unexpected, especially if I work in a system that a lot of other developers have touched.

📣 Sound off! 📣 Do you prefer to primarily use em or rem and why? If you learned something, let me know what you learned!

Discussion

pic
Editor guide
Collapse
cecilelebleu profile image
Cécile Lebleu

Coming from a typography background, ems (actually mostly rems) come naturally. Knowing the history behind it — the width of the box that holds the movable type letter M, which in most classic typefaces used to be to be the widest character — helps to understand the meaning behind it. Some other useful em-related characters include the em space (a space as large as a typographical em), can be accessed with &emsp;, and the em dash (), which is used to separate ideas, similarly to parentheses. On Mac, you can type it using option+shift+hyphen: —.

Fun fact: Similarly to ems, there are also ens. Like the em space, there's also an en space (&ensp;), and an en dash (), achieved with option+hyphen. It is technically measured as the width of half an em, though in some typefaces' designs the en dash width isn't the right width. Bonus fun fact, an en dash is the correct typographic symbol to use when referring to a minus (as in 4–1=3), however, if you use it in programming, it's not going to work. The hyphen, what we normally use as a minus symbol, is just a hyphen, the symbol used at the end of a line to separate a word when it doesn't fit in the line (called hyphenation). The en dash is properly used in text in some cases, like when denoting time ranges (2017–2019).

Back from typography nerd talk... I personally use rems 99% of time in CSS because it's most predictable. I set it to be 16px in my html or body CSS declaration, and then I know I can work in multiples or divisions of 16. I even have a handy chart written on the wall.

Collapse
kaylasween profile image
Kayla Sween Author

Very interesting! Thanks for sharing!

Collapse
alohci profile image
Nicholas Stimpson

Probably because I learnt most of my CSS long before rem was invented, I tend to reach naturally for em and only use rem when I specifically need it. I think rem is naturally easier for beginners to understand and fits better into a twitter-bootstrap or BEM organised way of styling, where the structure of the DOM document is downplayed as much as possible.

But if you believe in exploiting the richness of selectors and the structure of the DOM in your styling, then the em unit comes into its own. For example suppose you have some auxiliary content to the main content of your page. On a desktop, you might decide to present this in a sidebar. Because it's auxiliary content on a large pixel width display, you want to use a smaller font for the contents of the sidebar than the main content, so the eye isn't attracted to it so much. So you use em for all the descendant elements of the auxiliary content container, which are therefore ultimately all relative to the font-size defined for that auxiliary content container.

Then, for the rendering on a mobile, you decide that a sidebar doesn't work, and instead the auxiliary content should be displayed below the main content. In this case, you decide that don't want to use a smaller font than the main content. All you need to change for your font size in your media query is the font-size of the auxiliary content container, and everything will adjust itself appropriately. If you had used rem instead, that wouldn't have been possible.

Collapse
kaylasween profile image
Kayla Sween Author

Very good point. If I were working on a project of my own, I'd probably be more inclined to use em for things of that nature. Thanks for sharing that better use case for em!

Collapse
punchycodes profile image
Jamie Richardson

This post actually clarified the differences a lot for me. A few audible "oh!"'s were heard (I don't know if I punctuated that correctly). Anyway, thank you for the quick and educational read!

Collapse
kaylasween profile image
Kayla Sween Author

Awesome! Glad to hear it helped you! I know this was a gap in my own knowledge for a loooong time so I’m glad I was able to put it together and share!

Collapse
ben profile image
Ben Halpern

Great post!

I think rem is a better choice for a lot of stuff, but I haven't found myself using it just because I have the habit of using em.

Old habits die hard.

Collapse
kaylasween profile image
Kayla Sween Author

I can absolutely relate! 😅

Collapse
grepliz profile image
Liz Lam

Thanks for the great explanation!

Collapse
kaylasween profile image
Kayla Sween Author

You're very welcome! I'm glad I could help!!

Collapse
nguyentuan1696 profile image
Tuan Nguyen

i learned from a course on udemy that when set font-size 62.5% in html tag, using rem easier to control, what do you think about this ?

Collapse
kaylasween profile image
Kayla Sween Author

It just makes the math easier. As long as you're not setting the font size to 10px explicitly (as this has negative accessibility impacts), it's just personal preference. I don't mind working with 16px, so I just prefer not to change it. 😊