Is your blog printer-friendly?

Have you ever checked to see what your blog posts looks like when being printed on paper?

I visited some of my favorite blogs, spread across various blogging platforms. They all had one thing in common:

None of them provided print-specific styles.

This means that when someone wants to print a post, everything is included: menus, buttons, colors, forms, footer links to this and that…

Here's a comparison of what a printed version of the post Inviting inspiration looks like with and without print styling:

Screenshot

Useless for the reader, a waste of paper and ink, and bad for the environment.

Also, bear in mind that my blog design is quite minimalistic. Still, it requires two pages instead of one to print the post. Imagine when there are a bunch of sharing buttons, links to related posts, comments, a search box, etc.

Let's make our readers and Mother Nature happy by adding print-specific styles to our blogs. It's easy to do. All it takes is a few extra lines in your current style sheet.

I'm using Bear blog. Here's what I've added at the bottom of my theme's styles (edit it to suit your needs and preferences):

@media print {
body {
  background: #fff;
  color: #000;
  font-family: Georgia, serif;
}
h1, h2, h3 {
  line-height: 1.3;
  font-family: Helvetica, sans-serif;
}
a,
main a,
.post main a:visited {
  color: #000;
  text-decoration: none;
}
blockquote,
code {
  background: #fff;
  margin: 0;
  padding: 0 1.5em;
  border: none;
}
nav,
footer,
.upvote-button {
  display: none !important;
}
}

If you prefer to link to a separate style sheet, it would look something like this in your header:

<link href="/styles/print.css" media="print" rel="stylesheet">

Update July 9: Juha-Matti has a trick to display full URL after a link when a page is printed, which I now have implemented. I also decided to remove the header and include my name at the bottom using the CSS :after element.

Good luck, and thanks!