7 Tips for Great Print Style Sheets

Published February 13, 2008 by CSS Newbies.

Print documents - photo by desi.italy

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!

30 Responses

  1. Pingback: CSSnewbie Blog « Chapter, Book-style, Introductions, Using, Pure, Sheets, Style, Well « Sharebrain

  2. Pingback: crawlspace|media » Blog Archive » CSS Newbie

  3. Nathan Chapman (reply)

    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!

  4. Pingback: RUDEWORKS

  5. Rob Glazebrook (Author) (reply)

    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!

  6. Frank Boës (reply)

    …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.

  7. jharr (reply)

    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.

  8. Dave C. (reply)

    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.

  9. Gareth (reply)

    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!

  10. Rob Glazebrook (Author) (reply)

    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.

  11. Pingback: Make It Up As You Go » Blog Archive » 7 Tips For Great Print Style Sheets

  12. NatalieMac (reply)

    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.

  13. Pingback: Watch out : Web Designer’s Awesomeness of February

  14. Pingback: Watch out: Web Designer’s Awesomeness in February « outaTiME

  15. Pingback: » 7 Tips for Great Print Style Sheets - CSSnewbie Webcreatives

  16. Pingback: CSS-FAQ » Blog Archive » From Rob with Love: 7 Tips for Great Print Style Sheets

  17. Pingback: SEO & Web Design » Blog Archive » Watch out: Web Designer’s Awesomeness in February

  18. Pingback: SEO & Web Design » Blog Archive » Watch out: Web Designer’s Awesomeness in February

  19. Pingback: Print-Friendly Images and Logos with CSS - CSSnewbie

  20. Phil (reply)

    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?

  21. Pingback: Hiding Content in Your RSS Feed - CSSnewbie

  22. Rich (reply)

    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

  23. Rob Glazebrook (Author) (reply)

    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.

  24. Pingback: Don’t Forget the Print Style Sheet – Insights – Bozell – Integrated Marketing Services with Offices in Omaha and Kansas City

  25. Sanjay (reply)

    Hello Sir, my name is Sanjay from India at New Delhi. I need to know about how to write Basic Style Sheet (CSS). I still loosing lots of money, because I don’t know about Style Sheet. I am very much interested to know/ write CSS. Currently I just know how to edit CSS only. But want full details. I am little designer but something good in Internet, so please provide me accurate details where I will learn CSS or Write Style Sheet. Please help me, I am waiting for reply, please sir reply me soon on my email id. Thanks for your help in Advance.

  26. Pingback: CSS樣式架構[2-2] 全站共用型 (Common) - 樂倍達數位科技

  27. Nate Balcom (reply)

    Thanks for the post. I’ve been looking for posts that support
    the use of !important. I’m using it to strip styles out for printable pages, which I think is acceptable or at least one instance where using !important is acceptable. Keep up the good work.

Leave a Reply to Dave C. Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>