Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How is an em calculated?

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?
like image 228
Hailwood Avatar asked Jul 31 '11 05:07

Hailwood


People also ask

What are em units based on?

Originally the unit was derived from the width of the capital “M” in the given typeface. The article goes on to explain that although the em unit was originally based on the width of the letter “M”, this is no longer the case, and now the em unit generally refers to the point size of the font.

What does em value mean?

em value for electron is the ratio of charge on an electron to its mass. Charge on an electron = 1.602 × 10−19 C. Mass of an electron = 9.109 × 10−31 Kg.

How does an em work?

An em is a unit in the field of typography, equal to the currently specified point size. For example, one em in a 16-point typeface is 16 points. Therefore, this unit is the same for all typefaces at a given point size. The em dash — and em space are each one em wide.

What does em stand for unit?

It means “emphemeral unit” which is relative to the current font size. For example, if the current font size was set to 16px, then the bottom padding would be set to 160px. BenMore September 19, 2007, 4:19am #3.


Video Answer


2 Answers

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.

like image 153
OverZealous Avatar answered Sep 17 '22 15:09

OverZealous


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

like image 34
Jeremy Avatar answered Sep 19 '22 15:09

Jeremy