Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

font-size

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?

like image 222
sushil bharwani Avatar asked Dec 17 '10 19:12

sushil bharwani


People also ask

How many pixels is font-size?

What is a Point (pt)? A point (pt) is equal to 0.352778 millimeters, 0.0138889 inches, or 1.333 pixels.

What is 1em font-size?

1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

What is em text size?

An em is a unit of measurement, relative to the size of the font; therefore, in a typeface set at a font-size of 16px, one em is 16px. The em square is the “box” that each glyph is sized relative to. So, at 12 points, the em square is 12 points wide.

What is 1em in pixel?

So, by default 1em = 16px, and 2em = 32px.


1 Answers

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.

like image 122
egrunin Avatar answered Sep 19 '22 14:09

egrunin