Create a Print-Friendly Page with Gutenberg.css

By Jake Rocheleau. in Web Design. Updated on January 22, 2019.

Web designers often forget about print because it seems much less necessary nowadays. And this may be true for digital sites like BuzzFeed.

However, on informational websites it’s still a good practice to offer a custom print stylesheet. Thankfully, you don’t need to design your own because Gutenberg is here to help.

Named after the inventor of the printing press Johannes Gutenberg, this CSS library is a standalone resource for print page designs.

You just add the gutenberg.css file into your document head, and you’re all set.

Whenever a visitor goes to print your page it should automatically restyle based on the print setting. This can be set using the media="print" HTML attribute.

Check out this guide if you want to learn a bit more about print stylesheets and how they work.

The nice thing about Gutenberg is that it comes with extra classes and styles too.

Dig into the themes folder and you’ll find three alternate print themes: book, modern, and old style. You can make any of these the default by adding them on top of the default gutenberg.css file.

Also, you can style the page differently for print by adding specific CSS classes. For example the .no-print class will completely hide an element in the print style.

Another example is the addition of link URLs next to the text. Gutenberg adds this feature to make it easier for people to find the URLs from your page. But you can add the .no-reformat class onto the anchor element to hide the URL.

All this stuff is covered on the GitHub repo and it’s very straightforward. You can have Gutenberg installed in less than 5 minutes and your whole site will be print-friendly.

This is by far one of the simplest and coolest libraries to implement for better site performance. It may add a few extra KBs but the overall experience will be drastically improved.

If the content of your site might ever be printed for any reason then Gutenberg.css is an indispensable resource.