/ Published in: CSS
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:
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:
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
BODY {font-size:62.5%} H1 {font-size:2em} /* displayed at 24px */ H2 {font-size:1.5em} /* displayed at 18px */ H3 {font-size:1.25em} /* displayed at 15px */ H4 {font-size:1em} /* displayed at 12px #navigation {font-size:1em} #main_content {font-size:1.2em} #side_bar {font-size:1em} #footer {font-size:0.9em} <body> <div id="navigation"> ... </div> <div id="main_content"> ... </div> <div id="side_bar"> ... </div> <div id="footer"> ... </div> </body>
URL: http://clagnut.com/blog/348/