Print stylesheets are a vital, and often overlooked part of the web. Print stylesheets let you control how your website looks when it is printed.
Contents |
Basic Usage
There are a number of ways to define a print stylesheet.
Stand-alone
To define a stand-alone stylesheet, you define it like any other stylesheet, but instead of media="screen", you use media="print"
<link rel="stylesheet" href="http://www.paradoxdgn.com/wp-content/themes/paradox/print.css" type="text/css" media="print" />
Included in another stylesheet
If you have one stylesheet, and wish to include print styles in this stylesheet, you use a media selector.
@screen {
a:link {
color: green;
}
}
@print {
a:link {
color: black;
}
}
Tips
- It is best to seperate your stylesheet, so screen styles dont get applied to print, and vice versa
Rules of thumb
When you are designing a print stylesheet, many of the things you know about design from CSS still apply. But you have to take into account the change in medium.
Colors
- Printers are very good at producing black, and rather poor at producing colors. Limit yourself to greyscale colors. You can still make a very compelling design.
- Don't use absolute black, for the same reasons you don't on the web, it looks hard. Use a softer black, like
#222 - Background colors should ALWAYS be white or transparent. Most printer drivers treat white as transparent, and it is safe to assume this.
- To make an element stand out, you can do a color inversion; set the background to grey and the text to white. This is useful for headers
Fonts
- Sans-serif looks very good on screen. On print, its very different. Sometimes it can look good, sometimes it cant. Play around with printouts of fonts, see what you like more
- Serif is much more traditional for printed mediums, and much easier to read than sans-serif fonts. Again, play with your font stacks, and attempt to get something you like.
- Strong, italics, and other text styles become more pronounced on a printed page. What may look fine on a screen may look artificially heavy on a printed page.
- Headings can be darker than the body text, and should be bigger and heavier.
Margins and Pagebreaks
- Printed pages should ALWAYS have a margin around the edges. I personally set my margin to
.5in, but this is up to you. Margins make reading easier, and leave room for notes - Control your pagebreaks, set <p> to avoid
page-breaks-inside. Place a pagebreak between your content and any discussion (ex comments) - Lists and paragraphs should have a tad more space around them than they would on screen.
Borders
- A 1 pixel border under an element, like a header, looks very good in print.
- Borders should follow the same laws of color as mentioned above
Images
- Eliminate most images from printouts. Images that are important parts of articles are OK, but images that don't significantly contribute, like slideshows, should be left out.
- Attempt to scale images down, or crop them, to only the important content. Ink-heavy pages can "pinch" and distort. Laser printers will make a mess of all but the most simple illustration.
Links
- Put the url of a link after the link. People can't click a link on a printout, but they may want to visit it You can do this using the following code:
a:link:after {
content: " (" attr(href) ") ";
}
- Links should be visually distinct from surrounding content. Text-shadows, italics, and lighter colors are ways of achieving this.
Other site content
- All navigational content on a page should be hidden. People cant click them on your printout, you don't want to show it to them.
- Placing a footer with copyright information, permalinks, and date printed can be quite useful for your readers.