1. Make the type as readable as possible

On the web, the body type for articles here is a sans-serif. On the printed page, I think that serif fonts are easier to read so I reset the font-family to Georgia. No background and black text is the default, but just in case, I explicitly declare it in the body.

2. Use as much of the page as possible

Again, I think this is default behavior, but since I wrap my content in a "page" tag anyway I thought I would make use of that to set a 100% width and remove any margin and padding.

3. Default styling ain't bad for print

Notice that I didn't do typographic styling whatsoever except setting the font. Default print styling does, what I feel, is a pretty decent job here on it's own. This is assuming that you are using quality markup. In my articles, the title is an <h2> tag, the sub-titles are <h3> tags, and the body paragraphs are in <p> tags. This results in a nice hierarchy of font sizes on the printed page without any styling necessary.

Code samples, which are wrapped in <code> and <pre> tags default to a monospace font, which is great. Unordered lists get a healthy indent and are bulleted.

3. Remove the extra stuff

Chances are, if someone is printing an article of yours it is because they want to save the content as reference material, read it later, or share it with a friend. They really don't need to see your page navigation, sidebar, or fancy footer. Again assuming that you have nice and semantically marked up code, removing those sections should be as easy as setting the display value of the parent elements of those areas to none.

4. Display the URLs in the body content

[Thanks to David Walsh for this idea] Links in your content don't do any good on the printed page. It would be pretty cool if you could just tap the linked word with your finger and it would open the webpage on your computer, but thats something I haven't even seen in the movies yet. For now, we can just use CSS pseudo class ":after" to drop in the URL right next to the link, using the content attribute. IE doesn't support it, but c'est la vie.

5. Include a thank-you note

At the end of my content, I put a little "thank you" note. This area gets hidden on the web, but is displayed when printing the article. I think it's just a nice touch and also serves as a reminder they should come back to the website for fresh stuff.

6. Optional: Page breaks

I didn't feel my articles really warranted specific page breaks, but if you write really long articles with sub headers, you should definitely consider placing page breaks before each of those sub headers. Another place that would be good to use a page break is right before a fairly large table. Nothing is worse than having to flip between pages looking at a table because it happened to fall overlapping two pages when it could have fit onto one. I plan to use these on a case-by-case basis. More on page breaks here.

So now you may go forth and print my articles at will! Let me know any other tips you guys have for print stylesheets or any comments you may have about mine.

Share this:

Comments

As far as where to use page breaks, it’s really up to the programmer. For a blog, like your site and mine, I recommend putting a page break between the end of the article and the beginning of comments. That makes it easier for the user to do a “print preview” and easily exclude comments if they don’t care about them.

Great article, very helpful. One other thing I might add to the print stylesheet (on a similar wavelength to David Walsh), is to hide the responses at the bottom of the article, as I wouldn’t really want to waste any paper. Hope this helps.

Good point David, I think I’m gonna add the page break before the comment area.

@Ian: I see what you mean not wanting to print out the comments but I think I will leave them in by default. Sometimes there is some great stuff in the comments submitted by you guys and I think that should be printable if people want to. With the page break, you can easily choose not to print that but if I hide it, it will be impossible to print.

I can’t get the numbers of my ordered list to show up in print preview. The show up correctly on the web page but I can’t figure for the life of my what style code to use in my css page for printing. The indent is there but no numbers. What am I doing wrong?

Wes Lyda: have you tried changing the list-style-position property on the ol so the the value is inside? It may be that the bullets/numbers are appearing outside of the visible, printable part of the page. Try either of the following rules and see if they work:

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like.