How to size text using ems - CSS

/ Published in: CSS
Save to your folder(s)

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:

Copy this code and paste it in your HTML
  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
  7. #navigation {font-size:1em}
  8. #main_content {font-size:1.2em}
  9. #side_bar {font-size:1em}
  10. #footer {font-size:0.9em}
  12. <body>
  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


RSS Icon Subscribe to comments

You need to login to post a comment.