An Explanation of Ems

33 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Ashley Bowers

    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!

  2. Tim Duffy

    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!

  3. Kevin Burg

    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.

  4. Heiko

    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!

  5. Eddie

    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 …

  6. Jan!

    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!

  7. Aaron Jensen

    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!

  8. Gabe Hollombe

    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;

    }
  9. Russell Polo

    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”

  10. Drew McLellan

    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.

  11. Mike Bryan

    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;

    }
  12. Richard Rutter

    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.

  13. impressive

    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…

  14. Marc Luzietti

    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. ;-)

  15. Lee Smith

    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.

  16. Shayne Genoway

    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.

  17. Richard Rutter

    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.

  18. Sally Carson

    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!

  19. www.lindkold.dk

    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…

Impress us

Be friendly / use Textile