What is em font size? How much is this in pixels?

Question

I want to know what em is and how much 1em is when converting to pixels ( px ). I also read somewhere about some IE bug to overcome what body font size should be set, but couldn't achieve much. Can someone explain this in detail?

Answer 1

Although you can read elsewhere, there is a direct no relationship between em and px.

As stated in one of the links:

the value of "em" in the width of the capital letter M

So for each font this will be different. A narrow font can have the same height (in px) as an extended font, but the size of the em will be different.

EDIT three years later:

Now there are many sources that say 1em = font size (in px). That is, when you write font-size:16px , then 1em = 16px. This is still inconsistent with the Adobe source (which states 1em = font size in pt ), but it seems weird anyway; em would be too large with condensed fonts and too small with extended fonts.

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

As well as:

I see that no one (including me) answered the question (which was hidden):

I also read somewhere about some ie error and about overcoming this body font size for something

According to this page , you need to add this to your css: html{ font-size:100%; } html{ font-size:100%; } . There are six years on this page, and I have not read (hundreds) of comments, so I do not know how relevant this is.

Answer 2

The M-principle that em is based on the letter M and depends on the font is often a myth! The W3c em documentation very briefly describes how ems and pixels relate. Using the letter M to calculate font sizes is at least overly complex and unnecessary.

The unit "em" is equal to the computed value of the property of the font-size element on which it is used. an exception is when "em" is encountered in the value of the font-size property and in this case it refers to the font size of the parent element. It can be used for vertical or horizontal measurement.

Here are the highlights.

• Without increasing the ancestor, 1em exactly matches the pixel font size attribute.

• Increasing the ancestor with x-ems or x-percent means that you are simply multiplying by the obvious x or x / 100 ratios. Thus, a simple java-script loop will calculate the exact font sizes, assuming: (1) there is no CSS to upset the java-script; and (2) some ancestor has a font size set in absolute units. This is the computed value that the documentation is talking about. Hand calculation can get around CSS, but an absolute unit still needs to be found in the ancestral chain.

• Since ems measures the width, you can always calculate the exact font size by creating a div with a length of 1000 em 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.

• You can probably create a font where the M-principle fails, since em is based on the font-size attribute, and not on the actual font. Suppose you have a weird font where M is 1/3 of the size of the other characters and the font size is 10 pixels. Don't you think that the font size in pixels guarantees to a certain extent the maximum height of the character, and therefore M will not be 10 pixels, and all other characters 30 pixels?

Warning

• The main warning (2) is that the relative ratio of the ex-unit is wildly unstable. In the same constant font browser, the relative ratio may vary with the font size. The relative ex ratio also changes with the browser, even with the same font size and safe browser font, such as Georgia. This is a pretty good reason to never use an ex-unit if you want a match. If an ex unit is used, it is not possible to calculate the font size through the chain of ancestors.

Answer 3

It is designed for the size of your body font. You can use the pixel to em converter to find out what exactly is on your site.

PxToEm

Answer 4

em is a dimension originally used in a print shop (according to Wikipedia). Here are some things to consider: if em is defined as type 12pt, then em is 12/72 inches of the printed page; but if you define em as 16px, its width in inches depends on the resolution of the medium. (Note: 72ppi resolution at 120ppi used to be considered the “safe browser” standard before the advent of mobile devices.) So, when your users on a device with a width of 300 pixels, 1em, like 16px, is a lot of “real estate”. In my opinion, the best use of em dimensions is to define text paragraphs for effective white space balance, and not for page layout or positioning.

Answer 5

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

Answer 6

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

As stated in this 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 ems conversion table for font sizes.

Answer 7

Named after the letter "M", the em unit has a long tradition in the printing house, where it is used to measure horizontal width. For example, the long dash that is often found in American texts (-) is called "em-dash" because it historically has the same width as the letter "M". His narrower cousin (-), often found in European texts, is also called "en-dash".

Over time, the meaning of "em" has changed. Not all fonts have the letter "M" in them (for example, Chinese), but all fonts have a height. Thus, this term means the height of the font, and not the width of the letter "M".

From The Amazing Division and Other Best Practices https://www.w3.org/WAI/GL/css2em.htm

Answer 8

Here is a good explanation:

• px - em -% - pt - keyword

And px to em converter

Answer 9

em almost matches the percentage, I suggest reading http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/