Advanced Search

Return to Snippet

Revision: 1615
at October 30, 2006 03:04 by zensir
Initial Code 
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>
Initial URL 
http://clagnut.com/blog/348/
Initial Description 
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:
Initial Title 
How to size text using ems - CSS
Initial Tags 
css, layout, design
Initial Language 
CSS