51

I want to know what the em unit is, and how much 1em is when converted to pixels (px). I also read somewhere about some IE bug, to overcome which body font-size should be set to something, but couldn't follow much. Can somebody explain that in detail?

Improve this question
0

8 Answers 8

Reset to default
47

Despite what you may read elsewhere, there is no direct relationship between em and px.

As one of the links states:

the "em" value is based on the width of the uppercase M

So it's going to be different for every font. A narrow font might have the same height (in px) as an extended font, but the em size will be different.

EDIT three years later:

There are now lots of sources which say that 1em = font size (in px). That is, when you write font-size:16px, then 1em = 16px. This still doesn't agree with the Adobe source (which says 1em = the font size in pt), but in either case it seems bizarre; the em size would be far too large with condensed fonts and far too small with extended fonts.

I'm going to make some test pages and see for myself.

And also:

I see that nobody (including me) actually answered the question (which was kind of hidden):

I also read somewhere about some ie bug and to overcome that set body font-size to something

According to this page, you need to add this to your css: html{ font-size:100%; }. That page is six years old, and I haven't read the (hundreds) of comments, so I don't know if it's still relevant.

Improve this answer
4
  • this is really new. Is there some source where i can read around it.
    – sushil bharwani
    Dec 17, 2010 at 19:51
  • 3
    en.wikipedia.org/wiki/Em_(typography), which cites Adobe (adobe.com/uk/type/topics/glossary.html). But now that I read it, that page also says "Em is traditionally defined as the width of the uppercase M in the current face and point size. It is more properly defined as simply the current point size. For example, in 12-point type, em is a distance of 12 points."
    – egrunin
    Dec 17, 2010 at 19:52
  • did u see mention of some ie bug for setting body font size to 100% for proper work of em
    – sushil bharwani
    Dec 17, 2010 at 20:05
  • 2
    This is NOT true for CSS and computer displays. Read this: v1.jontangerine.com/log/2007/09/… in css - em and px actually ARE related. Basically 1em equals the inherited font-size on the current element. e.g. You can set font-size for your body element, and have all other elements use 'em' in their font-size and it will be relative to the size you set in the body. This is a nice way to make your fonts responsive (all you need to do is to change the size for your body once...)
    – Yuval A.
    Nov 14, 2013 at 23:52
19

The M-principle that an em is based on the letter M and is dependent on font is an often stated myth!! W3c em documentation very succinctly describes exactly how ems and pixels relate. Using the letter M to compute font-sizes is at the very least overly complicated and unnecessary.

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement.

Here are the salient points.

  1. Without ancestor magnification, 1em is exactly equal to the pixel font-size attribute.

  2. Ancestor magnification with x-ems or x-percent means you just multiply by the obvious ratios x or x/100. Thus a simple java-script loop will calculate exact font sizes, assuming: (1) no C.S.S to frustrate java-script; and (2) some ancestor has it's font size set in absolute units. This is the computed value the documentation is talking about. A hand calculation can get around C.S.S., but an absolute unit must still be found in the ancestor chain.

  3. Since ems measure width you can always compute the exact font size by creating a div that is 1000 ems long and dividing its client-Width property by 1000. Since ems are rounded to the nearest thousandth you need 1000 ems to avoid erroneous pixel truncation.

  4. You probably can create a font where the M-principle fails since em is based on the font-size attribute not on the actual font. Suppose you have a weird font where M is 1/3 the size of the other characters and you have a font size of 10 pixels. Don't you think the pixel font-size guarantees maximal character height in some way and so the M will not be 10 pixels and all other characters 30 pixels?

Warning

  1. A major caveat to (2) is that the relative ratio of the ex unit is wildly unstable. In the same browser with constant font, the relative ratio can change with font size. The relative ratio of ex also changes with the browser even with the same font size and browser safe font such as Georgia. This is a pretty good reason not to ever use the ex unit if you want conformity. If the ex unit is used, it is impossible to compute the font-size through the ancestor chain.
Improve this answer
5

It's calculated off of whatever your body font size is. You can use a pixel to em converter to find out exactly what it is on your site.

PxToEm

Improve this answer
4

em is a measurement used in printed typography originally (as per wikipedia). Here are some things to consider: if em is defined as 12pt type, then an em is 12/72 inch of a printed page; but if you define an em as 16px, its width in inch is dependent on the resolution of the media. (Note: 72ppi to 120ppi resolution used to be considered a "safe browser" standard before the advent of mobile devices.) So, when your users are on a 300px width device, 1em as 16px is a lot of "real estate". Best use of em measurements, in my opinion, are defining paragraphs of texts to balance white space effectively, not for page layout or positioning.

Improve this answer
3

Named after the letter "M", the em unit has a long-standing tradition in typography where it has been used to measure horizontal widths. For example, the long dash often found in American texts (--) is known as "em-dash" since it historically has had the same width as the letter "M". Its narrower cousin (-), often found in European texts is similarly referred to as "en-dash".

The meaning of "em" has changed over the years. Not all fonts have the letter "M" in them (for example Chinese), but all fonts have a height. The term has therefore come to mean the height of the font - not the width of the letter "M".

From "The amazing em unit and other best practices" https://www.w3.org/WAI/GL/css2em.htm

Improve this answer
2

EM is a unit of measurement proportional to the point size of a font.

Improve this answer
2

this link can help you http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

As quoted from that article:

We know that 1em is always equal to the font size of the parent element, therefore:

1 ÷ parent font-size × required pixel value = em value

For your bookmarks: Pixel to ems conversion table for font sizes.

Improve this answer
1

em is almost the same as percentage, I suggest to read http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.