Optimising your website for print

Reading Time: 2 minutes

With the arrival of digital technology and in particular the web, many people predicted that this would greatly limit the volume of printing. In reality, the opposite has happened as these new technologies, coupled with the democratisation of personal printers, have made it easier for everyone to print. In passing, this can be seen as an illustration of the rebound effect or Jevons’ paradox

It should be borne in mind that printing is still used for personal or business purposes for the transmission or storage of information. 

We will therefore look here at how to make the printing of website content as low impact as possible. We won’t discuss the printer, paper or inks used (printing in draft quality, double-sided, multiple sheets per page, etc). Instead, we will look at good design practices that can make printing less impactful and the printed content more readable.

To begin with, let’s look at what the existing guidelines mention on this subject.   

This is partly in line with what we will now see in terms of recommendations.

Limit the number of pages 

Often, when trying to print a simple web page directly, the number of sheets used seems disproportionate. This is the case, for example, when printing an electronic ticket, such as a train ticket. There are a number of ways of overcoming this: 

  • Reduce page margins  
  • Reduce the spacing between elements  
  • Reduce the size of titles and texts  
  • Linearise content  
  • Remove peripheral content (decorative images, contextual elements such as blocks presenting similar articles or the latest articles, menus, top and bottom of the page, navigation elements, etc) 

Limiting ink surfaces 

If we saw in the previous good practice how to limit the amount of paper used, it is also possible to limit the use of ink. If a dark mode is in place, make sure that the background is white when printed. Again, it may be worth removing unnecessary visuals such as decorative images.   

Some fonts are specially designed to reduce the amount of ink used in printing. Take a look at Ryman Eco or tools like EcoFont.   

Another option is to allow the user to print the content without the images. In some contexts, images can help with comprehension, but you might as well give the user the choice of printing a page with or without the images.   

In addition, CSS filters can limit the ink cost of images: Quality print versions with CSS filters

How to implement these good practices?  

As mentioned in the 115 best practices for web eco-design, the easiest way is to set up a stylesheet dedicated to print and used for the whole website. For this, I invite you to read the Smashing Magazine article “Print stylesheets in 2018“.   


In order to facilitate the printing of website content, we have seen here the best practices to implement. The development costs are limited but the benefits for users can be substantial. It is indeed essential to keep in mind all the contexts of use of a website.