Print CSS

As we found in Scott’s great post last week, printing is still a huge part of how people receive information on the Internet. And a little-known feature in CSS can help make your site look as good printed as it does on desktop or mobile browsers. That way you’ll ensure your visitors are happy printing good-looking coupons or PDFs!

media=”print”

The first step to making your site look great when it’s printed is to define a print stylesheet. There are two ways to do this. First, you can create a separate stylesheet with just the rules for printing the page, and specify it using the media="print" attribute:

The other way to do it would be to specify print rules directly in the stylesheet, using the @media print group:

@media print { /* Print CSS rules go here */ /* Note: You need a separate @media screen group for other rules */ }

Next Improvements

Now that you can tell visitors’ browsers how to print pages on your site, here are some tips for improving your site’s printed view:

• Remove extraneous elements––People aren’t going to be clicking ads, navigation menus, or sharing buttons on printed documents, so those will just be in the way. Use the 'display:none;' CSS declaration to hide these. You could also move them around on the page to make the printed article easier to read, such as wrapping text around interstitial ads rather than having them break up the content.
• Accentuate the features––Many articles today have excerpts, sidebars, and infographics that get cut off or removed entirely when they’re printed. Your print stylesheet should make sure these are included in the printed version.
• Change the font––For some types of content, like recipes, people will be reading it at a distance, so a larger, easier to read font would be helpful. There have been extensive studies that show that serif fonts like Times New Roman are easier to read on print than sans-serif fonts like Helvetica, while sans-serif is easier to read on the Internet.
• Remove color––Printer ink is one of the most expensive liquids that exists, and while you’ve spent a lot of time figuring out your site’s color scheme, most people don’t want to print color because of the cost. Your print stylesheet can remove the color from links and headers, and, in the latest browsers, even take the color out of images. Doing this will help your visitors save money, particularly if your site is printer-heavy.