/ 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/
Comments
 Subscribe to comments
                    Subscribe to comments
                
                