Creating a Print CSS File

posted by Ishmael Sanchez on Jun 07, 2009

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
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.

Post new comment

  • Allowed HTML tags: <em> <strong> <cite> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.

Ishmael Sanchez