Koodoz Design

Don’t you just hate it when you print a website only to find out that it’s gone all wrong? Background images and colours are lost, text becomes unreadable due to lack of contrast and many elements, such as menus, are unnecessary when in paper, thus wasting precious micro-drops of the most expensive liquid in the world. Worry not, for CSS is the answer to all of these problems.

You can create a style sheet exclusively for print media

Amazingly, many people —even seasoned web professionals— don’t know this. The CSS2 standard defines ten different media types: all, braille, embossed, handheld, print, projection, screen, speech, tty and tv. I bet you didn’t know you can use CSS for braille printers or TVs!

Inserting print style sheets into your document

You can associate print styles with your documents in numerous ways. The most common one is through the use of the <link> tag. You need to use the media attribute to specify that it’s meant for print:

<link rel="stylesheet" type"text/css" 
 href="print-stylesheet.css" media="print" />

You can also use the @import rule inside style tags – notice the media specification after the parenthesis:

<style type="text/css">
  @import url("print-stylesheet.css") print;
</style>

Finally, you can even specify different media on the same css file. You can do this by using the @media rule:

<style type="text/css">
@media screen {
   body {background: magenta;}
}
@media print {
   body {background: none;}
}
</style>

Styling documents for print

Okay, so now you know how to specify your styles. You now need to tell the printer how to render the document. Let’s take our beloved Koodoz website as an example. Consider our design services page. There are tons of elements that would be useless on a piece of paper: the main menu, the RSS subscription link and the form elements, for instance, so let’s remove these:

p#eco, p#rss-info, form, ul#nav {
	display: none;
}

Also, unless you absolutely need to, do not use colour. Non-decorative images are okay, but other than that, everything else should be black and white, including links. You can, however, use shades of grey for visited and non-visited links, but be careful with the contrast. This provides a nice little usability cue:

a {
	color: #666;
}
a:visited {
	color: #999;
}

Now, for typography, you want to take this piece of advice: for the screen, sans-serif fonts are easier on the eye. For print, however, go with serif. In our case, we’ll combine both: sans-serif for the headers and serif for paragraphs and other large bits of text:

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
}
p, ul, ol {
	font-family: Georgia, "Times New Roman", serif;
}

Just the tip of the iceberg…

These are just the basic recommendations for printing. You can do many, many more interesting things: Separate content sections, format tables, use the CSS first-letter pseudo element, etc. Next thing you know, you’ll have mastered editorial design!