advanced code snippet search

Posted By

chrisaiv on 06/11/08


Tagged

css


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

basicmagic
SpinZ
rd3k
jfherring
asturi
tof


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

 / Published in: CSS
 

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.

Expand | Embed | Plain Text 
  1. * { margin: 0; padding: 0; font-size: 1em; }
  2. html { font-size: 125%; }
  3. body{ font-size: 50%; text-align: center; }
  4.  
  5. p { font-size: 1.2em } /* == 12px */
  6. #content { width: 80em; margin: 0 auto; } /* == 800px */

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: koncept on June 15, 2008

I'm not following the use of 125% for HTML. Since a browser's default font size is 16px, what if you were to do the following instead:

html { font-size:100%; /IE/} body {font-size:62.5% /* Reduce to 10px base /} p { font-size: 1.2em / 12px */ } ...

Posted By: chrisaiv on June 20, 2008

body { font-size:62.5% } works too! Personal preference.

You need to login to post a comment.