How is an em calculated?

Question

I have noticed that you can use 1em and it will look different on different sites.

What is an em in proportion to?

• The font used?
• The biggest font size?
• The page width/height?

Answer 1

The em is defined as the height of the capital letter "M" in the current font and size.

https://web.archive.org/web/20131127083352/http://www.guistuff.com/css/css_units.html

Answer 2

See http://w3schools.com/cssref/css_units.asp

1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses

An EM is relative to the current element it is defined on. If you use relative sizes (like 0.9em), they multiply and can lead to unexpected dimensions.

Now, the default size of a font is not standard between browsers. And there's an issue with IE (at least older IE) when setting the font to a specific pixel unit. A good overview for font sizing can be found on A List Apart.

Answer 3

According to the W3C an em:

"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."

In other words, ems don't have an absolute size. They take on their size values based on where they are. For most Web designers, this means that they are in a Web browser, so a font that is 1em tall is exactly the same size as the default font size for that browser.

For most browsers, default value 1em = 16px