15

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?
Hailwood
  • 89,623
  • 107
  • 270
  • 423

3 Answers3

13

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.

OverZealous
  • 39,252
  • 15
  • 98
  • 100
  • If you want to use relative sizes but but more consistency, try using `rem` instead, which refers to the default font size on the `html` element: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/ – Avishai Sep 12 '16 at 17:30
4

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

Jeremy
  • 4,797
  • 1
  • 18
  • 26
3

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

a3nm
  • 8,717
  • 6
  • 31
  • 39
  • -, link seems to be offline - that's why the essence of a linked article should be included in the answer itself. –  May 02 '16 at 21:14
  • @AndreasNiedermair: Thanks for pointing this out! I replaced it by an archived copy. Note that my answer already includes the essence of the linked article relative to the original question by the asker. – a3nm May 03 '16 at 20:26