Due to developers’ habitual reliance on pixel values, I think some of us may not have a full understanding of what are em units in CSS, and how they work.
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.
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 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. :)
I use ems whenever it aids readability. If the user changes their font size then padding, margins etc. can be relative to enhance legibility.
Did you not get the m-em-o you were supposed to use a pun in the reply. Fun article.
Haha.. good one. I guess I wasn’t em-phatic enough for Henry. :)
I now understand that mysterious em size much better.
I will rem-ember to use it in the future everywhere.
Have a website, where some pages are completely off and I did not get why, using em for everything. NOW I know what probably has gone wrong.
Thank you very much.
Too many puns? Well, I can never get enough of ’em!
PS: Great article, very helpful for us beginers :)
I love those puns. Thanks for including em
Good point about the combined use of pixel/percentages for layout and em for typography.
You’ve gotta use ’em all.
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.
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.
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
i’m fairly new to css and still learning, why do they have to set the html font size to 62.5%?, i’ve visited some website and the default font-size is set to 100%. why is that? :|
It’s on the base-font and base-font size generally 16px. It depends type of browser you using. Here for root (html) we using 62.5% means 62.5% of base size or root(html) = 1/8+1/2 = 5/8 * 16 px = 10 px. I hope this would be helpful for you :)
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!)
Cool tip! I just looked at some CSS of a site I liked last week and was wondering why they had the font-size set to 62.5%.
If only Em-ma was your real name — that would be ironic… (get it, em dash!)
Dynamic code… very “em”portant.
Great article. You should be crowned Em-peror of puns.
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.
“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.
Ah, I wasn’t aware of the rem unit introduced by CSS3. Interesting stuff.
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/)
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
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.
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.
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 :)
em thankful for the article… Now I know what em is :)
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 :)
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
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.
For me I prefer to use px than em in web development, however, using em and percent are great in responsive design.
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!
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 :-)
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!
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..
Yes, you’ve done an em-pirical job of summarizing the main pionts. :)
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!
goooooooood
Thanks for a very clear and informative explanation.
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?
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’…
A lot of em’s for my M’em’ory. Great Article though.
Thanks for clarifying this emportant topic.
Thank you for this. I will no longer read ’em’ and weep!
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
This might help:
http://css-tricks.com/why-ems/
thanks a lot
i got it.
(y)
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
My em-ployer will be very happy because of this… thanks! :)
Thanks for sharing really helpful.
Is there any fall back for the
remunit?Thanks, nice post
Question:
what is the meaning of letter “e” in css “em” size unit of measure?
It comes from old typography:
https://en.wikipedia.org/wiki/Em_(typography)
The word “em” doesn’t stand for anything, it just used to be a reference to the letter “M” (em), which is what an “em” was originally based on.
A G-em of an article. I will be using ems in my next project and this was really informative as to how they work. I have read elsewhere that a good tip for using ems with typography is to set your font-size to 62.5% on the body. This will set font-size to 10px without explicitly setting it to 10px. 10px is easier to do you em calculations with than 16px. A font size of 18px is then simply 1.8em.
My ability to create puns is em-barrassing, but i like yours!
these comments are funny to read because responsive layouts must not have been as important back in 2012..
im just starting my coding adventure and i already see the importance of em and rem units with media queries etc.
Thank you for sharing! This is the first time I know about em.
Is this an “Empirical” unit of measure?