Media Temple Hosting

Understanding em Units in CSS

Understanding em Units in CSSDue to developers’ habitual reliance on pixel values, I think some of us may not have a full understanding of what the em unit is, and how it works in CSS.

As is the case with many topics I write about, I’ll probably learn a thing or two while writing this. So I hope this will serve as a nice summary of what em units are all about and how you can use them in your designs.

Ah-em — Definition Please

The spec gives us a very simple definition for the em unit:

Equal to the computed value of the ‘font-size’ property of the element on which it is used.

In other words, if you have the following CSS:

.element {
	font-size: 20px;
}

Then this means 1em defined on that element, or any of its children, would be equal to 20px. Here’s proof.

So if you did this:

.element {
	font-size: 20px;
	width: 4em;
	height: 4em;
}

Then that means that the width and height of the element (defined here as 4em x 4em) would compute to 80px x 80px (20px * 4 = 80px).

Let’s em-phasize This

The key to remembering this is based on what an actual “em” unit is, and where it comes from. According to Wikipedia’s article on em:

An em is a unit of measurement in the field of typography, equal to the currently specified point size. The name of em is related to M. Originally the unit was derived from the width of the capital “M” in the given typeface.

The article goes on to explain that although the em unit was originally based on the width of the letter “M”, this is no longer the case, and now the em unit generally refers to the point size of the font.

With this method of calculation, in a CSS file there is no strict definition for what an ‘em’ is; it all depends on what else is going on in your stylesheet. So theoretically, if you’ve declared a whole slew of length values using ems on various elements on your page, changing a single font size has the potential to throw your whole layout off.

What if “font-size” Isn’t em-ployed?

In the example above, and the JSBin I linked to, I’m explicitly defining a font-size. The em unit is subsequently derived from that ‘base’ setting. But what if the element doesn’t have a specified font size?

In that case, since the font-size property inherits through the document tree, the em unit’s value will be derived from whatever is actually inherited. If no font size is specified anywhere in the document, then the value of a single em unit will be equal to 16px, which is the default (and I believe that works the same in all browsers).

“rem” Should Be Automatic for the People

This is a good time to bring up CSS3′s new addition: the rem unit. The rem unit (or “root em” unit) has pretty good browser support: IE9+, FF3.6+, Chrome, Safari 5+, and Opera 11.6+.

From what I can see, the rem unit is pretty straightforward. It lets you base your em units on a ‘root’ unit defined on the <html> element. This way, you could go nuts with font-size settings in all sorts of places in your stylesheet, and any sizes defined with ‘rem’ would be relative to the root unit, and would not inherit from the parent as is the case with ‘em’ (which you could still use, allowing you to create different root unit contexts while still being able to reference the root unit).

And as is the case with em, if you don’t define a font-size value on the <html> element, then the root em unit will be the default 16px.

Carpe di-em

Sick of the puns yet? Well, too bad. :)

Having worked in the web design and development field for about 12 years now, it’s taken me a while to break free from fixed-width, pixel-based designs. Although I’ve started doing responsive layouts, I’m still hooked on pixel units. While this might be fine for layout elements, I think for typography, the em unit should be the go-to unit.

While it is possible to do an entire layout with just em units, I think for responsive layouts it’s probably best to use pixels or percentages — and, as mentioned, use ems for typography.

So if you’re like me, let’s seize the day — and start using the super intuitive ems and rems wherever it’s practical and sensible.

If You Can’t Beat em — Join em

Oh and if anyone comments on this article, you have to include an ‘em’ pun. :)

48 Responses

  1. I use ems whenever it aids readability. If the user changes their font size then padding, margins etc. can be relative to enhance legibility.

  2. Too many puns? Well, I can never get enough of ‘em!

    PS: Great article, very helpful for us beginers :)

  3. I love those puns. Thanks for including em

  4. JvEs:

    Good point about the combined use of pixel/percentages for layout and em for typography.
    You’ve gotta use ‘em all.

  5. using em too much gets you in trouble once you start nesting elements willy nilly. easy to lose track of what the em is relative to.

    • Yeah, I think the use of ems is better when targeting small / medium sites.
      Once you have a bigger site with a CMS involved it gets more complex to control the em values of nested elements you have no control over.

      • Benxamin:

        You almost always have control. It may not be convenient or elegant, but you can chain tags & selectors to get to your target element.
        Just use an inspector on your deeply nested element, and set the font-size to 1em. Then see what the calculated (pixel) value is.

        From there, you can adjust up or down.

        • JKat:

          If you set your font-size to 62.5% for the entire site the unit of em’s and rem’s then becomes equal to 10px (1em = 10px). If you use both pixel and rem’s to define the size of font then you don’t have to worry about nested elements inheriting the font-size from it’s parent elements. Ive included a link to an excellent article that describes in detail with examples.

          http://snook.ca/archives/html_and_css/font-size-with-rem

  6. I use a fixed pixel value for layouts and em’s for type. If you set your body text font-size to 62.5%, then 1em is equal to 10px (on a usual 16px browser default). It makes it easy to keep track of your font sizes. I still find the whole measurement system a bit confusing though! Cheers for the explanation! Em (that was it there!)

  7. Sean:

    Dynamic code… very “em”portant.

  8. Juliebelle:

    Great article. You should be crowned Em-peror of puns.

  9. Tom:

    I typically use em values for font sizes and paragraph margins, and pixels for almost everything else. My only gripe is that different browsers seem to render nested em values (e.g., 0.95em text within 1.2em text) slightly differently, presumably because of how the numbers are rounded.

  10. David Hucklesby:

    “If no font size is specified anywhere in the document, then the value of a single em unit will be equal to 16px.”

    Not quite all browsers. Internet Explorer and Opera base their default size on 12 points. This translates to 16px only when the display runs at 96 DPI – as on most desktops. But my old laptop came set to 120 DPI, and the default size in those browsers was 20px.

    • And hence the inconsistent nature of the em beast. Still, I’m likely going to use em’s more, and I like the idea of trying the rem unit based on the root unit of the html element.

  11. Ah, I wasn’t aware of the rem unit introduced by CSS3. Interesting stuff.

  12. Evert:

    The only reason we started using ems over pxs was because of the scaling bug in IE6.
    It never became a general rule. I think most people who had accessibility high in their workflow used ems; the rest just used whatever was convenient.
    Since IE6 has died (it is in it finals death throws) there is no reason anymore to prefer ems over pxs. For every advantage they have (including less code for media queries) they have more cons (like horrible maintainability). However if you do want to break free of fixed sizes, then you better study up on density independent pixels (there is a good article on it on ALA http://www.alistapart.com/articles/a-pixel-identity-crisis/)

    • Anders:

      None of the current Internet Explorer versions (including IE9 I guess) support text resizing of font sizes specified in pixel units. Zooming will however resize the whole page, including the fonts, but that’s another story: http://snook.ca/archives/html_and_css/font-size-with-rem

    • Alon:

      I totally agree.

      I wanted to write the same comment as yours.
      The only reason people started to use em is ONLY because old IE(as 6) couldn’t support in text zooming.

      Today every modern browser has this ability.
      Use px. save a lot of time and headaches.

  13. Thanks for this timely piece. I was just having a conversation yesterday about this topic with a developer. It’s been interesting to see how this subject has gone back and forth over the years. I remember 4-5 years ago there was a good amount of designers who were using em. But then it seemed to fall out of favor. With responsive designs now I’ve seen em come back in use for certain elements.

  14. lol ! I love the puns. Although my wife thinks it’s a sign of brain damage. But seriously – great job of demistifying ‘em’s. You should get an emmy :)

  15. em thankful for the article… Now I know what em is :)

  16. murphaloid:

    Just want to say thank you for the tutorials on this site!

    As someone just starting out with web development, I really appreciate the help you are providing here. Its great that you are explaining a lot of things that dont seem easy to find information on, and you explain things brilliantly!

    Thank you :)

  17. It’s a good point of view, and as you said, if you change the general font size, all the text from the website will change.
    I don’t see any advantage yet.
    It easier to write “2em” than “40px”? …hmm, I don’t think so.
    I didn’t fond a reason to use “em” yet

  18. The puns were brilliant first of all.

    Right now I have to “re-adapt” the way I do sites and shift from pixels to em’s, and from pixels to percentages. Though what you say about the responsive site that can be placed in fixed or percentage values, think it’s best to change that mindset now.

  19. For me I prefer to use px than em in web development, however, using em and percent are great in responsive design.

  20. CF:

    Great article. Enjoyed the puns. I was trying to understand what the hell this ” Unit= ‘EM’ ” thing in the GWT layout tutorials was, and your article really helped!

  21. John:

    This is the kind of information I was looking for, better yet em-anating all that humor. I can’t em-pathize with the pun haters, their minds have not been em-ancipated. I call em as I see em. Em-cee Lazaris, please continue writing good articles em-blazoned with fun. Perhaps I overdid it, tehehehe :-)

  22. J. Groover:

    I fully EMbraced this article. Finally…a clear explanation on the subject. Best definitive article (incuding non web) I have read in a while. Thank you. Well done!

  23. astigmatik:

    so let me get this straight:

    1. “em”, by default, depends on the default browser settings (which you mentioned is generally 16px). therefore, any element (be it DIV, or H1, etc) using 1em is actually using 16px (if that is the default for that browser).

    2. we can define what (or force) 1em is by putting the code below in our styles. so for the whole HTML document, 1em = 20px.
    html, body { font-size: 20px; }

    did i understand correctly? sorry, no puns..

  24. I guess that a sane way to work with browsers that don’t support rem is to define a default font-size in the body’s CSS, then use em for everything else. In that way, you don’t have to think about screwing the overlay. Consistent font-sizes? You can now forget about ‘em!

  25. raj:

    goooooooood

  26. Thanks for a very clear and informative explanation.

  27. Set my font to 1em, and tried 16px. Set my page (div) width to 80em. Typed 150-M’s. Div extends out to 138M’s. Why the apparent disconnect between font size and page size?

    • Garryck:

      That would be because font sizes (in this case, 16px) refers to the HEIGHT of the font, not the width of any particular character in that font, such as ‘M’…

  28. Nokio:

    A lot of em’s for my M’em’ory. Great Article though.

  29. Thanks for clarifying this emportant topic.

  30. JJF:

    Thank you for this. I will no longer read ‘em’ and weep!

  31. I am confused..
    why need to used em.
    what is the advantage of this. and what is the disadvantage of this.
    please tell me..
    Thanks

  32. It is a unit of measurement equal to the current font size. The height of the em unit can be different in different parts of the document. When users can change the size of text in their browser, the em unit can vary in relation to the size of the text that the user has selected.

    http://www.corelangs.com/css/basics/units.html

    css units

  33. Michihiro Handa:

    My em-ployer will be very happy because of this… thanks! :)

  34. Thanks for sharing really helpful.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.