How is an em calculated?

html css fonts units-of-measurement
Hailwood picture Hailwood · Jul 31, 2011 · Viewed 11.2k times · Source

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?

Answer

OverZealous picture OverZealous · Jul 31, 2011

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.

Related questions

How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. …

Read More
Using .otf fonts on web browsers

I'm working on a website that requires font trials online, the fonts I have are all .otf Is there a way to embed the fonts and get them working on all browsers? If not, what other alternatives do I have ?

Read More
How can I use Google's Roboto font on a website?

I want to use Google's Roboto font on my website and I am following this tutorial: http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15 I have downloaded the file which has a folder structure like this: Now I have three questions: I have …

Read More