Table of Contents
How many of you found interesting information online and want to save it for later? Easy to say, but often harder to do. Sure, you have couple of options available like taking a snapshot of the page and saving it as an image file or you can use print command in your browser. This second option is often faster and does not require anything else then browser and place to save the file (pdf document). This is the time when print stylesheet comes into play.
In simple terms, you can think about print stylesheet like about a reset of your styles. The purpose of including print stylesheet into your website is to remove all unnecessary styles that are not used for text. Your goal is to create something that looks like a piece of paper with pure text. Nothing else. This means getting rid of all the navigation, sidebars, advertisement, footer, background colors etc.,. You will focus only on providing the content – article or blog post – in light and well prepared form. When it comes to print stylesheet, there are couple of guidelines and best practices you can follow to ensure everything works well:
Does this need to explain? You want to remove everything that is not necessary for the user. If someone want to print out the content of website, they are probably interested in something written there, not the navigation. On the paper, or in pdf file, the navigation only takes space you can use for providing text. The same rule applies also to footer and sidebars. If they does not contain any information related to main content, remove them – user does not need them. If you have any other elements on your website you are not sure about, ask your self couple of questions … Are they are important for the content? Have they any role in the context of the main content? Will it hurt the user if I remove them? When the answers are negative, remove them even if it hurts.
Make the text readable
Text is Alpha and Omega of content, make sure it is readable. This means resetting all the colors and other unnecessary decoration styles. All you want is black text on white background – like a newspapers. Readability and legibility is your main focus here. Everything that damages these goals or distract the user must go away.
Colors of text
Set the base color of text to black. This is probably the best color you can choose. There is nothing to mess up with this approach.
Enlarge the content
Without the navigation and sidebars, you have all the page just for yourself (well the content). Make a good use of it. Reset all margins and padding and make sure to expand the text to full width of the page (width: 100%). As said, your goal is to make it look like a printed article so there is no reason to keep 1/3 of the page on the side blank. Also, by doing this you will have more space for your content and avoid expanding it over too many pages. That would not look good.
Colors of background
The best background for print version of your website is … White. Forget adding any other fancy stuff or shade and keep it simple.
The links
Important think to keep in mind is to provide the content of links. Question is how to do it in suitable and usable way. One good choice is to include their urls inside parentheses right after the hyperlink.
Colors of link
Another thing in case of links to consider is to differentiate them somehow from the rest of the text. Here you can break the black & white rule and make them stand out a bit. Use some nice and soft shade of blue or green so it will not hurt eyes of the user or distract him while reading.
Font size
Adjust the font size to readable size. In print industry, the standard for regular text is 12 points. You can use this value too and set it as base size for all paragraphs of text on the website. For headings just add few points.
Typeface
Choose the right typeface can have very big impact on readability of the text. For example setting the font-family of content to comic sans or some script typeface might look like a bad joke for the user. If you are in doubt here, serif is often good choice. It is readable and widely used in print – books, magazines, posters – so why not to use it also for print stylesheet.
Comments
Keep them or remove? … That’s the question. Well that depends on you and the content itself. Do they provide any important information related to content? In case of yes, you can keep them, however most often it is good to remove them anyway.
Thank you
No matter what the content is about you should always be polite and thank the user for investing his time in reading and printing the information. It does not have to be something large like Rome and Juliet. Something simple as “Thank you for printing this article! You are always welcome.” is enough.
Summary
While creating a print stylesheet might look like waste of your time, it can actually please your users and add value to content you are providing. Through simple stylesheet you can make sure that user will often get the information in best looking way possible.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
