What is the em font-size unit? How much is it in pixels?

Question

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 b

Answer 1

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.

Answer 2

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

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

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.

Answer 5

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/

Answer 6

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.