7 Tips for Great Print Style Sheets

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!

12 Comments

  1. 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!

  2. 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!

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

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

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

  6. 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!

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

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

  9. On March 25, 2008
    12:07PM

    Crusader Extreme said:

    Good thread, i like this tips :)

  10. 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?

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

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

12 Responses Elsewhere

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

    [...] like this blog. Well written and easy to read. You can find some helpful artcles here like “7 Tips for Great Print Style Sheets” or “Book-style Chapter Introductions Using Pure CSS“ 02.14.08 | (Click [...]

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

    [...] post is a real winner – 7 Tips for Print Style Sheets. Check it out. add to del.icio.us | digg this | blogs, design, development, [...]

  3. RUDEWORKS said:

    [...] …dar estilo a la forma en la que se imprimen tus páginas, evitando elementos innecesarios sobre el papel. [...]

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

    [...] CSSNewbie has a list of pointers for creating style sheets for printing web content. [...]

  5. Watch out : Web Designer’s Awesomeness of February said:

    [...] 5)7 Tips for Great Print Style Sheets- 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. [...]

  6. Watch out: Web Designer’s Awesomeness in February « outaTiME said:

    [...] 5)7 Tips for Great Print Style Sheets- 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. [...]

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

    [...] 7 Tips for Great Print Style Sheets – CSSnewbie [...]

  8. On May 06, 2008
    2:23AM

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

    [...] 5)7 Tips for Great Print Style Sheets- 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. [...]

  9. On May 06, 2008
    2:23AM

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

    [...] 5)7 Tips for Great Print Style Sheets- 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. [...]

  10. On July 07, 2008
    10:33PM

    Print-Friendly Images and Logos with CSS - CSSnewbie said:

    [...] someone is going to print parts of it. In many cases, this is perfectly fine: if you have a print style sheet that takes care of your worst sins, your website should look okay. But one area where it may still look lackluster is the [...]

  11. On July 28, 2008
    10:01PM

    Hiding Content in Your RSS Feed - CSSnewbie said:

    [...] really the fundamentals of it right there. Be sure to add the class to both your screen and print stylesheets (assuming you have both). This will prevent the text from showing up on the screen or page, but [...]

Leave a Comment