How to use EM's when you're already comfortable with pixels

Chris Mendez -

Here's why I use em:

  1. Pixels are precise, but they're not very flexible. If you increase your browser's font-size, things may grow in wacky ways.
  2. Percentages solve the issue of flexibility, but sometimes the math gets tricky, and I don't feel very comfortable purely working in that mode. I believe in Rapid Development, which in this context means fewer calculators.

By translating 1em to equal 10px, I can think in terms of Photoshop pixels but also ensure that increasing the font-size will allow the site to grow proportionally. If you know how to multiply and divide by 10, you'll rarely need a calculator.

Note: The only time I do use px is for 1px borders. 0.1em doesn't work very well.

* { margin: 0; padding: 0; font-size: 1em; }
html { font-size: 125%; }
body{ font-size: 50%; text-align: center; }

p { font-size: 1.2em } /* == 12px */
#content { width: 80em; margin: 0 auto; } /* == 800px */