/********************************************************************/
/* CSS SETTINGS FOR PAGE PRINTING */
/* (using em) */
/********************************************************************/
body {
background : #FFF;
color : #000;
font-family : verdana,arial,sans-serif,serif;
font-size:75%}
/* 75% = 12px */
#content {
color:#000;
font-family : verdana,arial,sans-serif,serif;
font-size:1em; }
/* displayed as 12px */
#a.link_switch {
text-decoration : underline;
color : #00F;
font-size:1em; }
/* displayed as 12px */
.link_switch_p {
text-decoration : underline;
color : #00F;
font-size:1em; }
/* displayed as 12px */
#linkcontent {
text-decoration : underline;
color : #00F;
font-size:1em; }
/* displayed as 12px */
td.plyr_cat_title{
color:#000;
font-weight:bold;
font-size:1.25em; }
/* displayed as 15px */
a.plyr_link:link,a.plyr_link:active,a.plyr_link:visited,a.plyr_link:hover {
color : #000;
font-size:1em; }
/* displayed as 12px */
a,a.plyr_links:link,plyr_links:link {
text-decoration : underline;
color : #00F;
font-size:1em; }
/* displayed as 12px */
a:active,a:visited,a:hover,a.plyr_links:active,a.plyr_links:visited,a.plyr_links:hover {
text-decoration : underline;
color : #00F;
font-size:1em; }
/* displayed as 12px */
a.link_switch_p:link,a.link_switch_p:active,a.link_switch_p:visited,a.link_switch_p:hover{
text-decoration : underline;
color : #00F;
font-size:1em; }
/* displayed as 12px */
td.copyrights_p{
color:#999;
font-size:0.85em; }
/* displayed as 10.2px */
#header, #template, #navigation, #advertising, #image, #other, #footer { display:none; }
/********************************************************************
Source: http://clagnut.com/blog/348/
Assume viewers browser is set to ‘medium’ text (= all modern browsers = 16px).
1st step is to reduce this size for the entire document by setting body size to 75% which = 12px:
BODY {font-size:75%}
Think in pixels but still set sizes in terms of ems: 1em = 12px, 0.75em = 9px, 1.5em = 18px, etc.
...
...
...
#header {font-size:1em}
#navigation {font-size:1em}
#content {font-size:1.2em}
#side_bar {font-size:1em}
#footer {font-size:0.9em}
H1 {font-size:2em} /* displayed as 24px */
H2 {font-size:1.5em} /* displayed as 18px */
H3 {font-size:1.25em} /* displayed as 15px */
H4 {font-size:1em} /* displayed as 12px */
(font-size:0.85em} /* displayed as 10.2px */
********************************************************************/