Next, set the typeface for the page to a serif font. Reading text online in sans-serif is easier on the eyes, but in print media the serif font is still the choice for reading passages of text. For a later fallback choice, you may want to go with the Times typeface for print documents since it’s installed on most (if not all) computers, and it’s a workhorse of a font. In case your users don’t have Times installed, supply alternatives as well:
body {
background-color: white;
color: black;
font-family: Times,
"Times New Roman",
Garamond, serif;
}
Now you want to get rid of navigation-related links and other page elements you don’t want to see in the final printout. This includes the main navigation bar below the main header, as well as internal anchors in the page itself. If you have a page with ad banners, it might be a good idea to hide those as well (see Figure 10-4):
#navigation, hr, body>div>
a, #blipvert {
display: none;
}
Figure 10-4. Hiding the navigation bar and other elements (click image for larger view)
Designing the Main Heading
Because you are dealing with black and gray type on a white page, you have few options when it comes to designing how the main heading for the page should look. However, using what you have at your disposal, it’s nonetheless easy to create a masthead that calls attention to itself.
First, set the background to black and the text to white:
#header h1 {
color: white;
background-color: black;
}