Ems to Pixel Conversion - Why 62.5% and not 6.25%?

Question

I know that a lot of us are familiar with setting the font size on the body element in our CSS to 62.5%. This means that 1em will equal 10px and helps for keeping things pixel p

Answer 1

The conversion may be simpler, but an em wouldn't mean what it is supposed to mean.

1em is supposed to be equal to the width if a capitalized "M" in a given font. If the width of the letter M is 1 pixel, your font is going to be unreadable.

http://en.wikipedia.org/wiki/Em_(typography)

Answer 2

An updated version is available at http://pixelconverter.kleptomac.com Its an online unit converter for converting pixels, point, em, percentages. This supports conversion from/to any of these units.

Answer 3

I tried to do the same thing, but ran into an issue of using rems for margins and paddings. Setting font-size to 62.5% avoids these issues.

For example, the following CSS

html { 
  font-size: 6.25% /* 16px * .0625 => 1px */
}

p {
  font-size: 1rem;
  margin:    1rem;
}

renders as:

p {
  font-size: 1px;
  margin:    9px; /* WTF?! */
}

Strange, right? I'm assuming this is caused by some odd conflict with minimum font sizes.

---

Now, if you use font-size: 62.5% on the other hand, things render as expected:

html { 
  font-size: 62.5% /* 16px * .625 => 10px */
}

p {
  font-size: .1rem;
  margin:    .1rem;
}

renders as:

p {
  font-size: 1px;
  margin:    1px;
}