Creating a Print CSS File

It's important to have a print CSS file. I know that with web work it may seem that most people will be viewing your site with a web browser, but for accessibility and best practice reasons you should always have a print CSS file in case someone wants to print out information from your website. Below are some tips to remember when creating a print CSS file.

Print CSS Example

• Set an actual point size for font size
  
  I know this is a big no no for web work where resolutions and screen size vary, but it makes sense for printing since a printer is aware of point size.
  
  
• Set a serif font family
  
  This might cause debate, but for the most part people are used to seeing serif fonts with printed materials, so I think there is nothing wrong with following that trend.
  
  
• Remove blue link borders from linked images
  
  By default an image that is linked up will display an ugly blue link style as a 1px border around the image. Remove it with a CSS rule like: img{border:none;}
  
  
• Do style links differently
  
  This will emphasize the text is a link, which might not be apparent at first.
  
  
• Hide unnecessary content
  
  Paper real estate is just as important as screen real estate. Don't print out a bunch of unnecessary information, or worse, ads. Use visibility:hidden and display:none; to remove items.
  
  
• Define a readable color for your main body text
  
  Text should be easy to read on white paper. So if your text color is too light to easily read, define a darker color for better readability.

• ‹ previous
• next ›