Posted By

zensir on 10/30/06


Tagged

css layout design typography fontsize


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

postNuKe
Hirmine
marteki
shanegriff
kesavanv


How to size text using ems - CSS


 / Published in: CSS
 

URL: http://clagnut.com/blog/348/

BODY {font-size:62.5%} This takes 16px down to 10px (16 x 0.625 = 10), which apart from being less huge is a nice round number. From now on it’s easy to think in pixels but still set sizes in terms of ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc. If you are laying out your document using CSS (which you are, right?) then you have probably used a few divs to group together elements. Apply text-size to these divs and your job is almost done. Consider a two column layout with header and footer:

  1. BODY {font-size:62.5%}
  2. H1 {font-size:2em} /* displayed at 24px */
  3. H2 {font-size:1.5em} /* displayed at 18px */
  4. H3 {font-size:1.25em} /* displayed at 15px */
  5. H4 {font-size:1em} /* displayed at 12px
  6.  
  7. #navigation {font-size:1em}
  8. #main_content {font-size:1.2em}
  9. #side_bar {font-size:1em}
  10. #footer {font-size:0.9em}
  11.  
  12. <body>
  13.  
  14. <div id="navigation"> ... </div>
  15. <div id="main_content"> ... </div>
  16. <div id="side_bar"> ... </div>
  17. <div id="footer"> ... </div>
  18. </body>

Report this snippet  

You need to login to post a comment.