Skip to content

4 tips for a printer-friendly website

By Vlad Zinculescu on 14 Jun 2020

Printer

Printing a website doesn't mean just printing on paper. I, for one, like to print my articles as PDFs, so I resist the constant urge of tweaking them.

Apart from the obvious reasons ( e.g., cooking recipe), some visitors might need to print:

Making your website look the same in the browser and print is not easy. I put together some CSS snippets that will take you a long way to get you started. And for the over-achievers, I linked some more in-depth resources at the end.

1. Styles for print

First thing, to write CSS only for the printed version of your site, you need to use the following media query:

@media print {
/* CSS goes here */
}

2. Hide what's not needed

By far, the most common thing I do is hide all the elements that are not needed on a printout, e.g., navigation, ads, pagination, etc.

header nav,
footer
{
display: none;
}

3. Make it legible

When thinking of print, I try to optimize for that black-and-white printer that maybe is low on toner. Everyone else will have a much better experience anyway. Because of this, I removed the background color and made sure all text was pure black.

I also like to set a default font size to ensure no squinting is required. I found that 4mm is the minimum that I like.

body {
background: none;
}
* {
color: #000;
}
html, body {
font-size: 4mm; /* around 15px */
}

4. Fix the links

Since links can't be clicked on paper, I decided to expose the link's target. That means that this link becomes this link (https://ecsspert.com). And to skip on any embarrassing reveals, I decided to ignore dummy links, aka <a href="#">

a:after {
content: " (" attr(href) ")";
}
/* ignore dummy links */
a[href^="#"]:after {
content: "";
}

Resources

Some valuable articles that go in-depth on writing and debugging print css:

Your print stylesheet

The whole file, if 3 copy-paste combos are too much 🤷🏼‍♂️

@media print {

/* Hide what's not needed */
header nav,
footer
{
display: none;
}

/* Make it legible */
body {
background: none;
}
* {
color: #000;
}
html, body {
font-size: 4mm; /* around 15px */
}

/* Fix the links */
a:after {
content: " (" attr(href) ")";
}
/* ignore dummy links */
a[href^="#"]:after {
content: "";
}
}

Posted in CSS Code Print