Navigation

10 Tips for Better Print Style Sheets

Design, Web Design | Jan 29, 2010

Print style sheets have been somewhat forgotten, and yet they remain important all the same. Many people print out articles to read while traveling or when they have no access to the Internet.

Print style sheets have definite benefits. For example, reading on paper is less tiring on the eyes than reading on screen.

Also, following tutorials is easier if you have one next to you, with your code editor open on the screen; that way, you don’t have to switch windows every time to look something up.

In this article we’ll point out 10 easy tips that will help you create better print style sheets.

In case you’ve forgotten, here’s how to set up a print style sheet:

The media="print" attribute ensures that users don’t see any of the styles defined in the print.css file.

Some attention is required, though: if your main style sheet has no media attribute, the print style sheet will inherit its style. To separate them, set your main style sheet as follows:

Here are 10 tips to get you started with the print style sheet.


 

1. Remove the Navigation

What is the main difference between paper and computer? Paper is static, while a computer is interactive. And to facilitate that interaction, websites have navigation, which becomes useless on paper.

Hide the navigation and other parts of your website that become pointless on paper, such as sidebars that link to other posts. The code for this is very easy: just set the element’s display to none.

[css] #nav, #sidebar { display: none; } [/css]

Remove the navigation


 

2. Enlarge the Content Area

With the navigation and sidebar removed, our content is now spread across the page. This makes the print style sheet look more like an ordinary document, instead of a paper version of the website.

All we need to do to expand the content is reset the float, remove any margins and set the width to 100%.

[css] #content { width: 100%; margin: 0; float: none; } [/css]


 

3. Reset the Background Colors

Most browsers already ignore background properties to preserve ink. But to make sure that the entire background is white, we can set the body to white, and then give every child element still on the page a white background.

[css] body { background: white; } #content { background: transparent; } [/css]


 

4. Reset Text Colors

By resetting the background, another problem pops up. What if you have a dark-gray “Author information” box at the end of your posts, with the text in light gray or white? With the background now set to white, this information will invisible.

To fix this, change any light-colored text to something darker: black or, preferably, dark gray.

[css] #author { color: #111; } [/css]


Reset text colors
Take Sam Brown‘s blog above. Could you imagine what this would look like if he didn’t reset the text’s colors? Unreadable indeed.


 

5. Display the Destination of Links

Because paper is not an interactive medium, readers of course cannot click through on links to gather more information.

Example of a print style sheet showing URL destinations

Say someone is reading a print-out about a fancy new product. Seeing “Click here for more information” all of a sudden would be rather irritating for them, wouldn’t it? This is easily fixed by adding the link destination after the link text itself, giving you something like this: “Click here for more information (http://hereismore.com/information).”

What’s more, for CSS 2-ready browsers, this can be done with plain old CSS. Here’s the code:

[css] a:link:after { content: " (" attr(href) ") "; } [/css]

You can spice things up with a smaller font size, italics or whatever else.


 

6. Make Links Stand Out from Regular Text

Readers need to be able to distinguish links from regular text. Basic usability rules apply here: blue and underlining is preferred, but I prefer to add bolding, too.

Remember that documents are often printed in black and white. Don’t depend only on color difference. Here is the code for sensible printed links:

[css] a:link { font-weight: bold; text-decoration: underline; color: #06c; } [/css]

#0066cc is a fresh blue color, and it looks like #999999 when printed in grayscale. With this, links will look good printed either in color or in black and white. They will also stand out from regular text.


 

7. What About Font Size?

In print, 12 points is the standard. But how do we translate that to CSS? Some say setting the font size to 12 points (pt) is good enough. Others recommend setting it to 100%. Still others say not to declare any font size in your print style sheet at all, because doing so would override the user’s preferences.

Personally, I go with a 12-point font size most of the time:

[css] p { font-size: 12pt; } [/css]


 

8. What About Fonts?

Most people prefer serif fonts because they are less tiring on the eyes, they better lead the reader through the text, and so on. Setting the font-family to serif in your print style sheet is probably a good idea, although some readers may be surprised to find that the font in their print-out is not the same as the one on your website.

Here is the code for a good print font stack:

[css] body { font-family: Georgia, ‘Times New Roman’, serif; } [/css]


Use of CSS3 font-face in print

One of the benefits of CSS 3’s @font-face property is that your special fonts can be printed, too, making print-outs look a lot more like your website!


 

9. My Blog Has a Lot of Comments. What Should I Do?

Well, this is really your choice. On the one hand, think of all the trees you’d be saving just by adding #comments { display: none; } to your print style sheet. On the other hand, comments are of great value on some blogs and contain some great discussion.

By moving the comments to their own page, you give users the choice of whether to print them. CSS has a property that makes this very easy:

[css] #comments { page-break-before: always; } [/css]


For example, if your article is two-and-a-half pages long, the comments would run from page 4 up to, say, 6. Users would be able to choose which pages to print, without losing any information.


 

10. Show a Print-Only Message

Thank you for printing this article! Please don’t forget to come back to mysite.com for fresh articles.” Why not display a friendly message like this in the print-out? Or perhaps ask readers to recycle the paper they have used to preserve the environment.

Here is what that would look like:


Thank you for printing this article. Please do not forget to come back to mysite.com for fresh articles.

[css] #printMsg { display: block; } [/css]

You could add a bit of styling, too, like a 1-pixel border. Don’t forget to add #printMsg { display: none; } to your regular style sheet, to avoid confusing visitors.


 

Showcase

Here are some examples from well-known websites that have thought (or forgotten) about the print style sheet. Feel free to be inspired.

Looks Good:

Here are some websites that do a great job with their print style sheets:

24 Ways
24 Ways: The website for this “advent calendar for web geeks” has a fancy design, but I wondered how it would look in print. The result is really nice. The slick CSS 3 stuff has been removed. The layout is clean and yet still slick. The big branding has been removed, replaced by a simple right-aligned “24 Ways” next to the post’s title.


ThinkVitamin
ThinkVitamin: Carsonified’s blog is a good example of how to do print style sheets. No real weak spots except that the URL’s destination is not shown.


CSS-Tricks
CSS-Tricks: Chris Coyier of CSS-Tricks.com has done a good job with his print style sheet. He has removed all the clutter and moved comments to a new page, so users can choose not to print them.


Could Use Some Work

Here are some websites that are already great but whose print style sheets could use a bit of polish. No offense to anyone in this section.

WebdesignLedger
Webdesign Ledger: Webdesign Ledger seems to have neglected its print style sheet. When you click “Print,” you end up with three pages of advertisements and related links.


The Design Cubicle
The Design Cubicle: Brian Hoff seems to have forgotten about his print style sheet, too. When you print out an article, you get the comment form, too.


Flickr
Flickr: Being able to print out photos to show to friends would be nice. Flickr could have removed everything but the picture itself and the copyright information in print-outs. But everything appears in plain unstyled HTML.


 

Resources


Written exclusively for WDD by Pieter Beulque. He is a student and webdeveloper, living in Belgium. You can follow him on Twitter too.

Share this post
Comments (no login required)
  • http://www.skix.pl SkiX

    In my opinion it’s useless because I don’t know people who print websites

    • http://pieterbeulque.be Pieter

      It might sound useless, but some people I know (mostly people with no or not much experience) print websites.

    • Oce X

      Overlooking “useless” elements in a website is the reason why many sites are lacking usability. Print-specific stylesheets may be useless for some sites, but are almost vital for others. Imagine trying to print a recipe you just found, and article you enjoyed and would like to finish reading on the road, and even print out them lyrics for that new jam everyone’s listenin’ to – what a bust it must be to waste your toner on useless ads, navigations, and background images.

      Good article and great examples!

      • http://www.skix.pl SkiX

        As far as I’m concerned I just copy interesting article or something like that and paste it in Office Word and then I print it.

        P.S. Sorry for my English, I’m from Poland

    • http://www.kallmanonline.com Joel

      @SkiX – Probably most of the time you’re right.

      But what about reporting or data sets for businesses? Also, there are many business types that need to have physical paper on hand for state and federal law purposes.

    • Doc

      Maybe you should know some more people …

  • http://tr.im/mewC Rahul – Web Guru

    This is a new concept which has been taking up much pace and it is good to see some really good designs like noupe and other in the web. Cool style.

    • Melzz

      There is nothing new about print stylesheets, they have been around since css began. People are just too lazy to implement or unaware of them.

  • pesho

    Really It’s amazing thanks again
    I love these techniques

  • http://www.unuidesign.com Editha

    I loved your article!! I will try to apply this to my website as soon as possible :) Thank you so much, very helpful!
    :D

    Editha.

  • Marie

    It’s not useless. I often make pdf’s of certain articles or tutorials for easier (and offline) reference. So, it’s nice when the print style sheet cuts out all the clutter, alllows me to choose whether or not I want the comments, and includes the pictures or screengrabs.

    Smashing Magazine has a nice print style sheet as well. It cuts out all the navigation and ads, gives me the choice on the comments, and best of all…includes the pictures with the article.

    Ironically, the print style sheet for Webdesigner Depot wasn’t as good and actually cut off the article at 2 pages. Unless that’s a glitch on my system?

    • http://www.webdesignerdepot.com Walter

      Works fine for me…. anyone else experiencing problems?

      • http://www.online-blogger.net Indrek

        Working nicely. Usually some browsers tend to mess it up.

      • http://wilgory.com Gregory Wilson

        This page is not printing as a pdf properly for me, I’m on Firefox 3.6 on Snow Leopard and I also rate a site’s print-ability by how well is converts to a PDF. This article is cut off after 1 page. If I ever print a website page, I always preview the PDF to confirm that it is actually something that I would like to print and then from there I decide if I would like to proceed or not.

        Thanks,
        Greg

    • Simon

      Yep – I’m using IE8, and the print preview shows only p1; the other 6 pages show blank.

  • http://www.mgitsolutions.com/blog Michael Gaigg

    Great list! For a copy-paste code sample have a look at http://www.mgitsolutions.com/blog/2009/09/08/design-guidelines-print-stylesheet/

    cheers, Mike

  • http://tristandenyer.com TRISTAN

    Saying that it is “useless” because you don’t know people who print out websites is like saying designing with IE6 in mind is ‘useless because you don’t know people who use it’. People print websites. People (tragically still) use IE6. It happens, and creating a print.css can be a simple end-of-project to-do that we should all employ for numerous reasons. A few being:
    – saves paper, toner and aggravation
    – shows you thought the UI/UX all the way through
    – a good call-out of “printer friendly version” can actually get people to print it out, and now you have that all important ‘take away’ that they can share with others who may not have Internet.

  • http://twitter.com/alfiks alfiks

    Never actually used print style sheet, but it is worth to consider to use one. Quit useful tips, thanks.

  • arnold

    these are tips that some web designers forget which is essential btw…
    thanks..

  • http://printfancy.com printFancy

    Thanks for the detailed how to. For other examples of well printed websites check out http://printFancy.com “A Gallery for Websites in Print”.

    I hate the argument that it’s useless. A basic print stylesheet for a well marked up website can be written in minutes. So the question isn’t why bother, it’s why not bother.

  • http://night-fairy-tales.blogspot.com/ SMiGL

    uniquely to favorites! Thanks

  • http://www.webnetts.com Mario S. Cisneros

    Excellent Article!

    I have been designing and developing Web sites for 12-years and have incorporated a Print stylesheet as far back as I can remember. I thought I had all my basis covered, but the advice to include a “link destination” and “comments” rule was a new one and very much appreciated.

    Thank you,
    Mario

  • http://benthinkin.net Ben Gremillion

    For sites without print stylesheets, Printliminator from CSS Tricks lets you choose which elements to remove from a page before printing. It uses jQuery to hide anything you click on the fly. It’s free and works with every site I’ve tried. http://css-tricks.com/examples/ThePrintliminator/

  • http://www.jordanwalker.net/index.php Jordan Walker

    Great points to a commonly overlooked aspect of website development.

  • http://www.madebyguerrilla.com Mike Smith

    This something I have to look into fixing for GuerrillaFreelancing.com I am ashamed to say I totally neglected it on my sites – will have to fix that :) Maybe even put a discount code for design work on the print screen as an added ‘advertisement’ since I’ll be removing the sidebar and everything else.

  • http://hypertransitory.com John G

    Yes, great article. I usually implement these on client websites, but for some reason I have neglected some of my own. I need to do those and this handy checksheet is good to have around to make sure all the bases are covered. Thanks!

  • Kenn

    Love the print stylesheet here…

    http://www.tapslide.com

  • http://www.rezyde.com rezyde

    I don’t quite know people who print out sites to read.

    • Mel

      People don’t print “sites”, they do however often print out articles or other things such as recipes etc that a site contains so they can read offline.

      You can get creative with print stylesheets and make them pretty but at the very least a print stylesheet should be simple and remove all unnecessary junk such as nav elements, sidebars and advertisements.

  • http://goldennetwork.net usa cheap designer

    Nice tips ! thanks for sharing!

  • http://www.adivs.com lazukars

    There are some decent tips in here, but here are the ones I stick to:

    1.) If your client wants a pixel perfect print screen, then it is time to either, one, jump out a window, or two, inform them that this not possible. (yes, it might be possible with simple layouts)
    2.) Set all elements to {position:static} AND {float:none}. Doing so will save you countless hours of debugging.
    3.) Try to eliminate any {overflow:hidden} styles. Use {overflow:auto}
    4.) Set html, body{margin:0;padding:0}. This will eliminate unneccessary white space from the printed page.

    Good Luck!

  • http://www.inveve.com creative_blondes

    Great article.. I can tell by the CSS codenames that it’s really WordPress-related :). Didn’t knew about CSS2 showing the link destinations!

  • http://www.vcarrer.com vladocar

    You can also use Hartija – CSS Print Framework http://code.google.com/p/hartija/

  • http://www.accidental-artist.com/ Dani

    Great article – I have a notebook of online articles that I’ve printed. I find it highly ironic that this site doesn’t have its own separate print stylesheet, however. Side-project much?

  • http://www.christopherleedesign.com Chris

    Great write up! Print stylesheets boil down to accessibility in my opinion. I neglected to include a print stylesheet on my site and this post has made me want to add it. People will print your website just like people will size up the default text. It’s just what they do, we as designers have to compensate for that.

  • http://www.r4-ds-kort.dk cheap r4i

    Great article. Thanks for the tips. Your writing style is amazing. You can impress anybody with your skill.

  • http://www.designlovr.com DesignLovr

    Great Tips!
    This article motivated me enough to start developing my own print style sheet for my still very young blog and I’ll definitely use the info provided here as my main reference.

    Great work.

  • http://www.epgui.com/ Guillaume Pelletier

    Anyone mind telling me what I could add to my print css so that it doesnt skip to page 2 when it reaches the article snippets on the front page?

    I thought it might be because of a “clear” or a “page-break”, but I can’t figure it out. I hate that there’s no real way to debug it with Firebug (web developer toolbar doesn’t help).

    Problem page: http://www.epgui.com/

    • http://pieterbeulque.be Pieter

      Guillaume,

      I do not see any problems regarding your print stylesheet on your website?

      • http://www.epgui.com/ Guillaume Pelletier

        I’ve just checked on my laptop now, and it seems to be working fine! :S

        I couldn’t get the same results from work yesterday… that’s bizarre.

        It was printing only my h1/logo on the first page, and it skipped to page 2 when it started printing the articles. Anyway, I’ll just assume it works fine! =P

        Thanks for checking.

    • Mel

      There are page break properties

      page-break-before:
      page-break-after:
      page-break-inside:

      values (auto,always,avoid,left,right)

      see http://www.w3.org/TR/CSS21/page.html for more detail.

  • Si Keane

    Good tips thanks

  • http://www.moinid.com Design ideas

    Thanks for info. Very useful article

  • mars

    What if someone wants to print out the website as it is? with navigation and background included? I ask because sometimes as a student I need to print out the design of a website to include it in a research paper or something. Is there a way to ask the user what version of the site they want to print?

    • http://pieterbeulque.be Pieter

      I think your case is an exception. I would suggest you just take some screenshots, throw them together in Photoshop and print that out.

      I can’t think of any fast way to ask the user what version they want to print.

      Pieter

    • http://1mcreative.com Antoine Butler

      Also, seeing that your need is specific to the design itself rather than the content, I’d suggest using tools targeted to the design audience. There a few tools available that can take screenshots of a web page for you in all it’s glory. (ie. Little Snapper)

    • Mel

      You solution there is to take a screenshot, there are tools that allow you to screenshot an entire page (screengrab! in firefox for example).

      I know sometimes clients get confused when they try and print the site and it looks different but once you explain the reason why they understand.

    • http://elizawhat.com Elizabeth Kaylene

      If you use Firefox, there’s an addon called Fireshot that will let you take perfect screenshots. I use it all the time, and the free version is good enough to take screenshots to turn into PDFs, to resize for web portfolio use, or to print out. (:

  • http://www.grafikguru.com Web Designing Contest

    Excellent tips and now I am going to use this tips in my site designing and then post it in a contest running by grafikguru.com and then win the prize.

  • http://www.purplerspace.com/ purplerSpace

    even though i haven’t printed the web page for ages because i have my cell phone browser it really has its advantages..
    for instance, when you’re gone to the toilet and seeking some creative way to spend those few minutes and not stare at the paneling of he toilet wall :D

  • http://www.up-hill.de Gerhard Hill

    Great collection of print style tips! Especially showing the link destinations when the page is being printed is a very good idea.
    However, when I tried to print this page I had to scale down to 60% in print preview of my browser (IE as well as FF) before the text lines weren’t cut off. Makes the text rather small then and hard to read.

    Anyway, thanks very much for this very helpful article!

    Gerhard

  • http://www.twitter.com/josh_tuck Josh Tuck

    Ah! Wouldn’t have ever thought to do #5, #6, #9 or #10.

    Thanks for this article.

  • http://www.designtank.ws ChrisR

    I wonder how people make a print style sheet work when your website uses a 960grid system and you have multiple nested divs of varying column widths. Do you just make every div {position:static} AND {float:none} in the print.css? And how do you account for all the divs and classes generated by a Drupal site?

    I’m working on such a site redesign right now, and on the inside pages, which house things like Lesson Plans (which, yes, teachers DO want to print out), there are three columns: left has details of the author, etc and a summary; main column in the Lesson Plan Review, right column is place to download things, to share on social networks, and find related content.

    So if I make all the columns static with no float, will they just appear in order, stacked on top of each other, in the printed page?

    Thanks in advance for any insight into handling grid-based, CMS-backed site’s print style sheets.

    • http://1mcreative.com Antoine Butler

      Chris,

      Much like you would for the screen, a good place to start is with a reset. Here you would handle the margins, padding, positions, floats, and generic display rules. In theory zero’ing all room for error.

      If you have the the time to put into it, I’d suggest identifying all the page types (at least the page types most likely to be printed). ie. Lesson Plans, Schedule etc. I’m assuming pages of the same type would have similar markup and naming conventions. It’s with that information you can create print friendly variations of the screen display. Wether it be with columns or whatever.

      Yanking margins and paddings in your reset, will remove the nested div issue and you can apply new rules as needed with solely the printed page in mind.

      Hope that helps.

      ps. submit the final project to printFancy.com when your done.

    • http://pieterbeulque.be Pieter

      If you make everything static with no float and width on 100%, everything will appear from top to bottom on your page just like in the HTML code.

      Off course, this is not best practice. Navigation etc. should be excluded.

      Your case is a little difficult.

  • http://www.artscreen.de Sebastian

    Thanks for that article.

    Just a small hint/fix to the introduction “set your main style sheet as follows”:

    the stylesheet_screen.png should be as follows:

    main_style.css (or something like that), not again “print.css”.

    • http://pieterbeulque.be Pieter

      Sebastian,

      Thank you for correcting my stupid mistake :)

      I will see if a correction is possible.

      Pieter

      • http://www.artscreen.de Sebastian

        if u replace these images with code, like the others, then it’s also easier to copy-paste :)

  • http://roarofthefagiano.blogspot.com/ Andrea

    yeah! nice one :)

  • http://www.suburban-glory.com/ Andy

    When it comes to making the link destination clear I use the following CSS code:

    @media print{
    a:after{content:” (” attr(href) “) “;font-weight:normal;}
    }

  • private

    mmm…very interresting…too bad that printing that page in pdf format bring cropped text on the right side!…and curiously draging the page into acrobat pro give a good result.

    Adobe’s bug? How do you manage bugs?

    Not so easy isn’t it?

    ;)

    • http://www.artscreen.de Sebastian

      Give the Printliminator bookmarklet a try :)

      Then print with a pdf-printer-driver or s.e.

  • http://xavier52byrd.bravejournal.com Kalyn Varrato

    Issue you are discussing designed . In spite of this, picture this, let’s say you integrated a little things? I’m discussing, I dont need to teach the way to run your website, but if you basically additional excess subject material which can simply grab people’s awareness? Just just like a video clip and even a image or even 2 to obtain viewers fired up about what you talked about.