Ems are so-called because they are thought to approximate the size of an uppercase letter M (and so are pronounced emm
), although 1em is actually significantly larger than this. The typographer Robert Bringhurst describes the em thus:
The em is a sliding measure. One em is a distance equal to the type size. In 6 point type, an em is 6 points; in 12 point type an em is 12 points and in 60 point type an em is 60 points. Thus a one em space is proportionately the same in any size.
To illustrate this principle in terms of CSS, consider these styles:
#box1 {
font-size: 12px;
width: 1em;
height: 1em;
border:1px solid black;
}#box2 {
font-size: 60px;
width: 1em;
height: 1em;
border: 1px solid black;
}These styles will render like:
and
Note that both boxes have a height and width of 1em but because they have different font sizes, one box is bigger than the other. Box 1 has a font-size of 12px so its width and height is also 12px; similarly the text of box 2 is set to 60px and so its width and height are also 60px.
About the author
Richard Rutter is Production Director at Clearleft web design consultants. He massages his ego on Clagnut where he harps on about accessibility, web standards and mountain biking. Richard has just launched A Practical Guide to Web Typography where he combines his passions for CSS and typography.
Comments
02/12/2005
Great explanation Richard, like your website design for the Clear Left as well.You Jeremy and Andy are no doubt one of the most knowledgable web consultants on the web today!
02/12/2005
How did you know I didn’t have a clue what the heck EM was… if I read the article will I…??? derrr…..??
02/12/2005
This site is a really great idea. Found it on digg.com and i am very impressed. Keep up the good work, i will be sure to check back in hopes the quality keeps up. Great job!
02/12/2005
I thought I knew what the em was but this was all new to me! I doubt it will impress any of MY friends, but I will try it nonetheless.
Thanks for the great info, I’ll be looking forward to your site launch.
02/12/2005
This was very helpful, I too had trouble clarifying Ems. say, is it the same with Exs?
02/12/2005
another digg visitor
I had no clue what em meant. thanks for the short and sweet article.
02/12/2005
Short but absolutly correct and helpful explanation. Nice Example ;o) It is easy to explain people they don’t have any idea of Ems. Excellent!
02/12/2005
Prem – in CSS terms, ex is to lower case ‘x’ as em is to upper case ‘M’. One ex is exactly half of one em.
02/12/2005
Nice, concise article – one thing: I noticed that the ‘M’s are overlapping the bottom of the container boxes when viewed with Firefox/Linux, does anyone know why this is? Is Firefox/Linux (1.0.7/Fedora) broke?
Strange because it renders fine in Firefox/OSX 1.0.7 …
02/12/2005
Simple and effective. Thanks.
02/12/2005
Richard: one ex is not necessarily half an em. See the definition of em and ex
Drew: tabbing from the URL field in the comments form does not focus the message field. Also, I couldn’t get the link to work, even though (I think) I used the Textile formatting.
Both: thank you for this nice site!
02/12/2005
Sorry, yes the tab order sucks. That’s a default Textpattern ‘feature’. I’ll try and get it sorted.
I’ll fix your link.
02/12/2005
I, too, recently discovered ems. I like ‘em because they allow me to size divs and their ilk so that as the font size on a page increases, the div size does too. Awesome!
02/12/2005
This didn’t render properly in IE so I was wondering what you were jib-jabbing about. I opened of Firefox and now I see =)
02/12/2005
Now it renders properly in IE as well ahhhh what’s going on ignore my comments haha
02/12/2005
The way I like to use ems in my CSS is when I’m setting line-heights. For some reason, my eye really likes a line-height of anywhere between 1.2 and 1.4ems (depending on the circumstance).
I think it’s nice to set line-height this way because the line-height will always be in proportion to the size of your font.
Want to give it a try?
body {
line-height: 1.4ems;}
02/12/2005
OK, I kinda get it, but I’m still confused. Why does setting “id” set the style? The only way I knew how to do this would be to define .box1 and then do a div class=”box1” .. which , I checked, that works too, but I don’t understand the #box1 format with the use of “id”
02/12/2005
Russell – the # is a ID selector, just as the dot is a Class selector. The fundamental difference is that an ID uniquely identifies an item on the page – you can’t have two items with the same ID.
A class is more of a grouping concept (think ‘classification’). Many items on a page can be part of the same class.
02/12/2005
OK, that makes sense. Looking forward to day 3
03/12/2005
I have added to your code to use it as a dropcap
}p#box3:first-letter {
float:left;
color:#399;
font-size: 60px;
width: 1em;
height: 1em;
font-family: Times, serif;
border-right: 0.15em solid #fff;
03/12/2005
To fix your tabindex order, read this article…
Hacking Comment Form Tab Index
04/12/2005
Jan!: yes you’re right, 1 ex is not precisely half of 1 em, however 1 en is (not that there is such a unit as en is CSS).
1 ex refers to the ‘x-height’ of the font as so an this will vary depending on which font is being displayed.
04/12/2005
I enjoyed the reading
05/12/2005
I love it when the experts get it wrong.
05/12/2005
Even more so when they own up to their mistakes, rather than hiding away anonymously, wouldn’t you say “impressive”?
06/12/2005
Well, I’m not promoting a guide to typography, or making mistakes with basic terminology in doing so…
As I am neither promoting my own sites, or products, I’d say the point is not my anonomous state, but rather your choice to author and market something that is clearly not an area of expertise -otherwise a such an error would not occur. That you later accept this expert status only debases your project, and your authorship on the subject…
I’ll see you around…
07/12/2005
So 1em == 1pt? Interesting? Why use two different but equal units of measure for the same area? Is there an advantage to one over the other or do I have it wrong?
Also, there isn’t to much of 2005 left for something to be coming later in 2005. ;-)
07/12/2005
1em != 1pt. That was the whole point of this article. em is a relative (sliding) measurement.
That’s really the main advantage to using em fonts sizes instead of pt or px. When you use em, the font sizes are rendered relative to the user’s browser font size. Like in IE, the em is relative to the View -> Text sizes (Medium by default I think) and you can increase and decrease as you please. But for all those people that set their font sizes in fixed pt or px in their css, they essentially take this functionality away from the users.
08/12/2005
I love a good fight – Rutter v Impressive – but I doubt it’ll sell tickets. Thanks for eming it up for me so succinctly. And all the other contributors were excellent as well by expanding on the explanation and carrying it even further. Great work.
09/12/2005
I can’t believe Richard’s excellent “How to size text using ems” hasn’t been linked yet. http://www.clagnut.com/blog/348/
15/12/2005
Well Shayne, it’s hardly a fight is it. I think “impressive” is a little cynical for his or her own good. It always easy nitpick and naysay – Slashdot and Digg is full of it. Perhaps “impressive” would like to offer something of interest to us all?
This site and others like it do not have an ulterior motive, they are labours of love intended to be for the good of the community, who are free to take or leave it as they see fit.
The fact we stick our names and companies at the end is simply common courtesy.
21/12/2005
Thanks for the write-up. The only thing that surprised me was that the uppercase “M” shown was not exactly 12px tall (in the first example). I always thought that a 12px font size would mean that the uppercase letters, and ascenders of the lowercase letters would be 12px tall. Can anyone clarify? Thanks!
22/12/2005
As Lee Smith mentioned ems is used to ensure that people can change font size on your site.
I’m amazed how many people responded that they didn’t know about ems since I guess most readers here are into web design.
Maybe a lot of designers doesn’t pay attention to that issue – after all I suppose you want as many users on your sites as possible – and styling your text with a small text size excludes some.
But thx for a great article and getting the ems out in the open.
And merry X-mas u all…
Commenting is closed for this article.