I’d like to share some thoughts on styling for print. In the past we, the webmasters, used to make separate subpages for printers, but with growing media queries usage it’s not necessary anymore. Now, instead of creating extra page with some elements (header, footer, sidebar, etc.) stripped down, we can do that simply with CSS. In 2012 I made a research and came up with following guideline, which I revised during translation.

First, we have to attach print only styles. There are two sensible ways of doing that. One is attaching it with specific media attribute in HTML:

<link rel="stylesheet" media="print" href="our-style.css">

The other would be using media query inside CSS file:

@media print {
    /* All those lovely styles */
}

I prefer the first method, as file will be loaded only when needed.

Rules

See the effects on intended device

Styling for print actually should be considered a part of responsive web design. A piece of paper is not much different that LCD displayer or smartphone. There is a print preview which is very helpful for the most of the time, but eventually you will have to print it and see it with your own eyes.

Get rid of unwanted elements.

There is no need to be gentle. Normally I advise against using !important rule, but here is an exception, as we don’t need to care for cascading after applying print styles. One thing, print file should be attached as a last one.

.non-printable {
    display: none !important;
}

Elements I usually get rid of:

  • navigation menu
  • search
  • sidebar
  • footer: browser will print page URL anyway
  • videos: embed itself will not show, but sometimes it has some wrapping with fixed height, and that would show as an empty space
  • header: decide for yourself if there’s a company logo, unless it’s background-image (we’ll get to that) in which case drop it as well
  • advertisments: they would only waste an ink, and Flash would leave an empty space

The only thing that should stay is content. Preferably in one column because we don’t know what size of paper will be used (A4 most likely but we don’t know that for sure).

Use black font

Pages are printed mostly on a white paper. In that case black letters should improve legibility. Many people have only black and white printers, as they are cheaper. With printer like that all those fancy colourful letters would become fifty shades of gray. Meaning, the effect is out of control. Black is the colour, then. Sometimes people use different colour of paper, like green or pink, and especially then black should be more distinct.

The same goes to links. If you want to distinguish them, use underline. There’s no <u> anymore so there shouldn’t be any underlined parts of text.

(I once owned an ink printer, back in the 90s, and if there were colours on printed page, also black colour was a combination of cyan, magenta, and yellow. So in that case we also save some precious ink. Mo’ money in user’s pocket.)

Font size

Font size should be decided after seeing effect on paper and paper only. I used to think that pt unit is the best for printing but the result may vary depending on printer’s resolution. So it’s safer to use px after all. And em, i.e. if we want something like headers to be twice size of normal text.

No backgrounds

Although browser allow to print backgrounds, by default it’s turned off. And it’s not that easy, nor obvious how to turn it on. It’s safer, then, to assume that users haven’t changed that than give some elaborate instructions how to turn do it. (Which would have to be followed because browser’s options change as well. In 2012 Chrome used to not allow to print background at all.) In most cases users print pages because of text on them so let’s give them what they want. White background. It works very well with black letters from advice above.

Borders are allowed

Borders are okay and browsers leave them in print. Just keep them black or gray.

Add link’s hrefs to text

Links are lost in print as you cannot click the paper. (Duh!) But with this neat trick you can leave information about linked resource:

a:after {
    color: inherit;
    content: " (" attr(href) ") ";
}

Widths

Set all possible widths to auto.

Tools

Apart from mentioned before print preview and actual preview, there is Web Developer (for Chrome and Firefox) which allows to see page with media="print" and inspect elements, and that is very useful.

Further reading