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

Revision: 80620

at March 23, 2020 05:43 by chrisaiv

Updated URL

https://www.chrisjmendez.com/2008/06/11/how-to-use-ems-when-youre-already-comfortable-with-pixels/

Updated Code

https://www.chrisjmendez.com/2008/06/11/how-to-use-ems-when-youre-already-comfortable-with-pixels/

Updated Description

https://www.chrisjmendez.com/2008/06/11/how-to-use-ems-when-youre-already-comfortable-with-pixels/

Revision: 6735

at June 11, 2008 12:04 by chrisaiv

Updated Code

* { 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 */

Revision: 6734

at June 11, 2008 12:02 by chrisaiv

Initial Code

* { margin: 0; padding: 0; font-size: 1em; }
html { font-size: 125%; }
body{ font-size: 50%; text-align: center; }
#content { width: 800px; margin: 0 auto; }

Initial URL

Initial Description

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 am able to 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.

Initial Title

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

Initial Tags

css

Initial Language

CSS

Choose a language for easy browsing: