CSS doesn’t apply exclusively to the Realm of the Screen. You can also write style sheets that apply to the medium that first spawned them – print. This can be a very useful trick, since people read on the screen very differently than they read print documents. And your fancy-dancy layout may look stellar at 1024×768, but that doesn’t mean it rocks equally at 8 1/2″ x 11″.
So here are a few tips for creating a print style sheet that will ensure your website is user-friendly, regardless of the medium it ends up in.
1: Specify a Print Style Sheet
How’s that for a great opener? Specifying the style sheet in your code is the first step to a much more useable website. Here’s how you do it:
<link rel="stylesheet" href="print.css" media="print" />
The important part here is the media=”print” option. This tells the web browser to only apply these styles to print media.
2: Build On Your Screen CSS
One nice trick you can use is to build your print style sheet to amend your screen style sheet. To do this, simply neglect to reference a medium in your screen CSS link, like so:
<link rel="stylesheet" href="screen.css" /> <link rel="stylesheet" href="print.css" media="print" />
This causes your screen style sheet to be applied to both screen and print. Meaning, your print CSS only has to describe the things you want to do differently.
3: Wipe Out Your Screen CSS
Of course, if you want your print CSS to differ widely from your screen CSS, denoting all the differences between the two would be tedious. In that case, you’d want to do something like this:
<link rel="stylesheet" href="screen.css" media="screen" /> <link rel="stylesheet" href="print.css" media="print" />
Specifying a media of “screen” for your main CSS file means your print style sheet is building upon a blank slate. If you’re making a lot of changes, this can be useful.
4: Hide Extraneous Elements
Not everything that is useful on the screen is nearly so useful in print. For example, the navigation at the top of your page, or the blogroll in your sidebar, aren’t nearly so useful when they take up a full printed page and obscure your text. Consider hiding them in your print style sheet by creating a list of multiple selectors, like so:
#navigation, #blogroll {
display: none;
}Then, as you come across more elements that shouldn’t be in your printed version, you can just add them to the list.
5: Bump Up Font Sizes and Line-Heights
While I’m sure your 10-pixel-high cramped Helvetica looks so very avant-garde on the screen, people usually prefer a little more room when they’re reading on the page. Try bumping up the font-size and line-height a little compared to the screen:
body {
font-size: 120%;
line-height: 130%;
}6: Move to Serif Fonts
Serif fonts were created to make it easier to read words on the printed page. The serifs (the little “feet” at the bottoms of letters) help the eye define the edges of the letters and lines on the page. Sans-serif fonts, on the other hand, were invented for the screen: the serifs on low-resolution monitors and at small sizes tend to make the letters look a little fuzzy. So while Helvetica may be a great choice for the screen, perhaps Georgia would be better suited for the page:
body {
font-family: Georgia, "Times New Roman",
Times, serif;
}7: Think in Inches and Points
Pixels are a useful unit of measurement when dealing with the screen, but they lose some of their usefulness when you move to the printed page. At that point, it’s useful to remember that in CSS, you’re not limited to setting sizes in pixels, percentages or ems. You also have inches, centimeters, millimeters, points, and even picos at your disposal. Make use of them:
body {
font-family: Georgia, "Times New Roman",
Times, serif;
font-size: 12pt;
line-height: 18pt;
}
body #container {
margin: 1in 1.2in .5in 1.2in;
}
What other print style sheet tips have I missed? Share the love in the comments!
On February 13, 2008
11:55PM
Nathan Chapman said:
Something that many people sometimes forget to include into their print stylesheets (me included) is they forget to reset the width of the page to 100%, instead of (say) 950px.
Another thing, is people don’t like reading Navbars, advertisements, and sometimes even comments. You can get rid of these elements in your stylesheet by using the display:none; CSS statement.
Still, this article helped. Thanks Rob!
On February 14, 2008
7:32AM
Rob Glazebrook said:
Hi Nathan,
I have to say, remembering to resize your container width if it’s set in pixels is a great tip! If I ever do a follow-up to this post, I’ll be sure to mention that.
And I tried to allude to the “get rid of annoying elements” idea in tip #4, but maybe I should have been more explicit.
Thanks for your input!
On February 14, 2008
7:35AM
Frank Boës said:
…and you got to remember that browsers will ignore background-rules (like colors and images) in your print-stylesheet.
And remember to set your colors for best readabilty on white background.
On February 14, 2008
8:39AM
jharr said:
Frank, be careful with that, however. FF and Safari both have preferences that can allow these elements to display when printed…so if you can’t just assume they won’t show up. It’s off by default but some folks may chose to turn it on.
On February 14, 2008
10:36AM
Dave C. said:
So glad I followed @Jharr’s link to this blog, Rob. Been trying to catch up on all your previous stuff, and I ain’t too proud to admit I’ve found pretty much everything you’ve published so far to be extremely helpful.
On February 15, 2008
1:03AM
Gareth said:
Rob, you might need to brush up on your typography history – san-serif fonts, whilst good on the screen, were certainly not invented for it!
On February 15, 2008
8:13AM
Rob Glazebrook said:
That’s a good catch, Gareth… that should more accurately read “are optimized for the screen.” Letters-sans-feet did exist before screens came about (Arial and Helvetica are both older typefaces, for example), although several of the more common web fonts were invented specifically for the screen — such as Geneva, Tahoma, Verdana, and Trebuchet MS.
On February 21, 2008
11:57PM
NatalieMac said:
And don’t forget that while it is a serif typeface, Georgia was specifically developed for the screen.
Great article on a topic that is frequently overlooked.
On March 25, 2008
12:07PM
Crusader Extreme said:
Good thread, i like this tips :)
On July 28, 2008
9:35AM
Phil said:
hi – great advice thanks — but i have a query.
My print.CSS is working ok except that I have my IMAGES in a ‘right’ floating DIV [so that i can have captions below the images] and when I print in IE6 or 7 what happens is the main page text no longer wraps around the image DIV but stops before the image DIV and then starts again after it. Pretty frustrating as it works oerfectly in FF and SAFARI. Is there anyway I can get the floating images DIV to print out so that the text wraps around it nicely – as it does on the screen version?
On April 16, 2009
8:38PM
Rich said:
When i use the print/css i get blank pages in both FF and IE 6.
I am using the print/css for my faq’s page…I am stumped.
any help would be appreciated.
thanks in advance
On April 17, 2009
9:16AM
Rob Glazebrook said:
Hi Rich,
I don’t see what you’re seeing, but I do see something that could be a problem in your print CSS. The first line says body { visibility: invisible; }. This could prove problematic for two reasons.
First, visibility: invisible isn’t a real CSS rule (did you mean display: none?), so some browsers may choke on that and stop there. Second, even if browsers did figure out the rule, that probably wouldn’t be what you wanted. Since everything lives inside the body tag, if you made it invisible, nothing would show up on your page. So I’d take a look at that rule and figure out what you want it to do.