Whither print.css? A Rallying Cry for a Web That’s Fit to Print

(Be advised that this post requires a large amount of data to be downloaded.)

In the age of Instapaper and #longform buzzwords, I still prefer printing articles that won’t be finished in one sitting, ever since I got my laser printer.12

Somehow, however, accommodating this proclivity is a huge pain. This is what the current flow chart for printing from websites looks like:

  1. Do I want to gamble and just use Command/Ctrl+P to print this?
  2. Maybe there’s a print version of it somewhere.
  3. Oh look, the site has a print button powered by JavaScript. Fancy.
  4. Well, this all looks like crap; I guess I’m using Readability to reformat and print the page.
  5. Oh hey, the printed version looks much worse in print than it does on my screen.

In other words, this process is awful. Awful! It may in fact be the reason Chrome comes with a print preview.


The good news is that this problem is mainly due to sloppy webdesign. All it takes is to include a stylesheet with media="print". Most people know this, but they still do a half-assed job of designing the print version. It seriously shouldn’t take more than 30 minutes for any HTML and CSS neophyte, but here we are.

To demonstrate the state of the printed web, I conducted a completely unscientific experiment. As it will show, this is still a CSS-based web, so odd quirks inevitably pop up every now and then for even the most fastidious webdesigners.

The Experiment

The experiment involved printing some short articles from a few popular sites managed by people who ought to know the basics of webdesign:

  1. Daring Fireball
  2. The Modren Man
  3. Kottke.org
  4. Marco.org
  5. Medium
  6. The Verge
  7. TechCrunch
  8. The New York Times
  9. The New Yorker
  10. The Atlantic
  11. The New Republic

This was done on Windows 8 using Chrome. The scanner used was a Doxie Go. For what it’s worth, the images were scaled to fit the website (for both @1x and @2x) using IrfanView and cleaned up with ImageOptim, ImageAlpha, and JPEGmini. To see the raw, unedited images, just click the embedded images.

My scans look like a spy smuggled them from the Soviet Union on microfilm—perhaps because I never found the cleaner for my Doxie.2


I recommend you try printing out some pages yourself, because the sense of size and proportion isn’t conveyed that well in screenshots. Especially when it comes to font size, what may look just fine to you on-screen is completely oversized, if you have the print-out between your hands. Try comparing the scans of different sites to get an idea of the unfathomable difference between designers who get right, and those who don’t.

You aren’t meant to be able to read the articles outright from the images—but you can, if you’re on a retina device—so just inspect the general look and feel of the print-outs.


I took the liberty of not using the “print versions” of the articles on the websites who had them. Those who did were all websites for newspapers and magazines:

  • The New York Times
  • The New Yorker
  • The Atlantic

This was deliberate, as the aim of this post is to examine what the state of a web looks like through the lense of print.css. Maybe you don’t think it’s fair; in that case, you’ve probably missed the plot. Don’t let that discourage you from perusing the results, though.

Common Problems

Before we get to the print-outs, I want you to keep in mind these common design problems, as we encounter them throughout the article:

  1. Humongous text
  2. display: goddamn everything;
  3. Appended URLs
  4. Megamargins
  5. Comments included
  6. Anti-print
  7. Quirks

The Results

Daring Fireball

You might find it weird that we open with Daring Fireball, but it makes sense for reasons you’ll quickly see. John Gruber, as you may know, is a huge typography nerd, so I was very excited to see what the results looked like:

First image of Daring Fireball in print Second image of Daring Fireball in print

To my surprise, the result is really iffy from a typographic perspective. This is the only example where I recommend it, but try viewing the first screenshot in its original size by clicking it—or by zooming in, if you’re on a retina device. Keep in mind that I didn’t bother to configure my adblockers, so Daring Fireball and some other sites may appear slightly different than they would under normal circumstances.

I’ll think out loud here:

  1. If you’re pedantic, the hierarchy of banner, byline, article title, article date, and article body is a little unclear, probably because the vertical alignment trips you up.

    This isn’t really obstructive to the reading experience, though.

  2. Sans-serif Verdana for print on Windows? Really?

    Cut us a break and use something like Georgia. Again, though, splitting hairs here.

  3. Look closer. Try reading the article. Does something seem off to you?

    The letter-spacing is completely hosed. Look at the uppercase A’s and lowercase s, r, m, and k, if you don’t spot it right away:

    First image of letter-spacing issues on Daring Fireball Second image of letter-spacing issues on Daring Fireball Third image of letter-spacing issues on Daring Fireball

    The word-spacing appears off as well, but I can’t qualify that impression.

Sure, the design only displays what’s important, but the readability is botched. Clearly, John Gruber’s print.css doesn’t read letter-spacing: hosed;, so what gives?


Unfortunately, I don’t know, but as I was going over my own print design, I noticed the problem was also present in my design, albeit to a much lesser degree—and I was using Georgia at a 14px font size. I haven’t learnt what causes this problem, but removing the font-size: 14px; specification from my print.css did the trick, as it now defaults to the 16 pixels I use for the regular site.

I assume it looks better, when you print from a computer with Helvetica Neue and regular Helvetica on. I haven’t hooked up my Air to my printer, so I can’t check.


All in all, Gruber just about managed my expectations and didn’t commit any cardinal sins, and demonstrated that he’s taken an interest to creating a print design for people like me. Well, people with Helvetica Neue and regular Helvetica, perhaps.

Report Card
  • Quirks

The Modren Man

I might as well subject my own site to scrutiny along with all the others. The results are instructive, as it turns out.

The Modren Man in print

As basic as basic can be: strips superfluous elements, uses monochrome colours (and forces completely-black #000 text) where it makes sense. The coloured links are now underlined instead, so people can still tell when there’s a link.

This isn’t reflected in the photo, but the current print design actually comes with a quirk; Chrome prints out a second, empty page aside from the one displayed above. Using Opera, only one page is printed. The cause of this eludes me for now, but if there’s something I hate, it’s printing useless pages. This does not happen for all posts, though.


I’ve wanted to do something different with the print design, and I tried using a two-column design a long time ago, but it never panned out. Still, although the print design is very minimalistic, the ratio of text to empty space is too big as it is right now. Websites with dedicated print pages tend to approach this the wrong way by embracing a design where the width of the text encompasses the entirety of the paper, which makes for a sub-par reading experience; around 66 characters per line is regarded as ideal.

I’ll have to come up with something better, when I publish that future Pulitzer-winning article.


On a more general note, even people like Gruber and I don’t get print design completely right, so no one’s infallible here. We don’t want perfect to be the enemy of good.

Report Card
  • Quirks

Much as I would like to be a shining beacon of print perfection, that second empty page Chrome inexplicably prints dings me for a point on the report card. Boo, this experiment.

Kottke.org

I’ll just leave you with the result:

Image of Kottke.org in print

One might be inclined to argue the sidebar on the right is unneeded, but I think it adds a nice balance to the whole page.

I haven’t really got much else to say here. Kottke nailed it.

Report Card

Clean as a whistle; bravo.

Marco.org

I had high expectations for the creator of Instapaper, who always links to the print version of an article, given the opportunity. But how does he fare in our print.css test? Let’s see:

First image of Marco.org in print Second image of Marco.org in print

Well that won’t fly. Turns out Marco doesn’t even have a print.css file. Guess he thinks you need to use his software to read his words in print.

I disagree.

Report Card
  • Humongous text
  • Anti-print

Update: Marco is now hard at work crafting the optimal print experience for his site.

Medium

Medium present themselves rather not-so-humbly as the best thing since sliced bread for people who have the novel inclination to write stuff online. Let’s see how they hold up in the domain of print:


Actually, they don’t hold up very well at all; Chrome can’t even print an article! It just stops after the first page. This is the result after printing with Opera:

First image of Medium in print Second image of Medium in print Third image of Medium in print Fourth image of Medium in print Fifth image of Medium in print

This isn’t very good, is it. Notice the scroll bar to the right, which somewhy is included on every page. As on Marco.org, the text is also way too big, which is one of the reasons this print-out is five pages long. The text in general is too big, digital or print, but that’s another discussion.

No print.css by the look of it. Guess the creators of Medium only expect people to read the posts online. This is going to be a problem, when or if people decide to write longer posts on the network. For now, there probably isn’t a financial incentive to do so for contributors.

Report Card
  • Humongous text
  • Anti-print
  • Quirks

The Verge

Another service which prides itself on a swanky design.

First image of The Verge in print Second image of The Verge in print Third image of The Verge in print Fourth image of The Verge in print

These guys actually do have a print stylesheet, but, uhm, you wouldn’t know by the look of this.

Look at all that extraneous crap around the article, which itself is no longer than half a page. No sites scrutinized so far support comments4, but The Verge definitely think they’re important—so much so that they should be included in print. Online comments are the high-brow letter correspondences of our time, no doubt.


So far, The Verge are the most egregious offenders in wasting paper and toner. Look at all that orange.

The waste is only exacerbated by appending the links’ URLs to them in the text.

Report Card
  • display: goddamn everything;
  • Appended URLs
  • Comments included

TechCrunch

TechCrunch, TechCrunch

First image of TechCrunch in print Second image of TechCrunch in print

You can tell they tried, but … Appending URLs after links in printed text just doesn’t jive, especially when you adorn it with the same garrish green as the link itself.

TechCrunch commit the same sin many sites with a dedicated print version do as well, which is to just let the text fill out the entire width of the viewport or printed paper. As discussed before, that’s just too many characters per line. Of course, shorter lines would only serve to emphasize just how obstructive appended link URLs are to the reading experience.

Report Card
  • Appended URLs
  • Micromargins

Points for trying.

The New York Times

The remaining contestants in this experiment are newspapers and magazines. We start out with the Grey Lady:

First image of The New York Times in print Second image of The New York Times in print Third image of The New York Times in print

The Times swear by the print page as literally every other newspaper and magazine website I can think of, and the result is actually quite passable. While it has a lot of junk going on, it doesn’t change the number of pages printed significantly.

It’s no surprise that what is probably the most technology- and design-savvy “paper of record” does well on paper. I just wish they would take the full step and just support a direct print approach. It wouldn’t take a lot of work beyond hiding superfluous elements.

Report Card
  • display: goddamn everything;

The New Yorker

Ho boy, what a mess you’re in for:

First image of The New Yorker in print Second image of The New Yorker in print Third image of The New Yorker in print Fourth image of The New Yorker in print

Okay, positive thinking. I guess this is what a New Yorker article must read like in a screenreader, and I guess it’s alright from that perspective. But this is just bad, bad, bad. It’s also the second example of a print that includes the comments—which aren’t as copious as on The Verge. Honestly, the print version isn’t much better.

I wish I could say it doesn’t get any worse, but I’d be lying—at least this is readable. Here’s a closing observation that scattered my brain matter: they actually have a print.css file. Holy. Shit.

Report Card
  • display: goddamn everything;
  • Micromargins
  • Comments included

The Atlantic

I wish this were a palate cleanser, but at least it still gets worse after this:

First image of The Atlantic in print Second image of The Atlantic in print Third image of The Atlantic in print Fourth image of The Atlantic in print Fifth image of The Atlantic in print

I felt a great disturbance in the Force, as if millions of printers suddenly cried out in terror …


This is just getting too painful. Better to move on and get this over with.

Report Card
  • display: goddamn everything;
  • Comments included

The New Republic

This physically hurts to look at:

First image of The New Republic in print Second image of The New Republic in print Third image of The New Republic in print Fourth image of The New Republic in print

Not only is The New Republic an olde magazine of yore, it was also acquired by Facebook zillionaire Chris Hughes who ought to know a thing or two about this stuff. And yet, the redesign of the website gave us such atrocities as

  • A weird, sans-serif logo that screams “we’re totally hip and with it, you guys”
  • Justificated text(!!!)
  • Pull quotes given zero typographic attention

When it comes to the printed page, things only get worse. Look at this for size:

Busted drop caps on The New Republic Busted margin on The New Republic

You can tell there is a print stylesheet, because the drop cap (in the first photo) is styled differently, and the text is no longer justified, thank God.

I don’t know whether to fault them for the cut-off paragraphs, especially since the cut-off differs between prints of the same article. It’s probably the cause of the bad CSS juju that’s made for some of the confounding quirks we’ve seen on Daring Fireball and this site.


But all in all, The New Republic handles the job so poorly that I am almost personally offended—the entire redesign has taken everything we associate with historic, enduring papers and thrown it all away, perhaps for the better in some respects, but definitely for worse in many others. It’s completely devoid of soul.

To be fair, you could say the same for the magazine under former stewardships, but for entirely different reasons …

Report Card
  • Humongous text
  • Anti-print
  • Quirks

Report Card Summary

Thank God, we finally made it. Lest we forget, seven deadly sins:

  1. Humongous text
  2. display: goddamn everything;
  3. Appended URLs
  4. Micromargins
  5. Comments included
  6. Anti-print
  7. Quirks

The final tally:

                  1  2  3  4  5  6  7
Daring Fireball:                    X | 1
The Modren Man:                     X | 1
Kottke.org        -  -  -  -  -  -  - | 0
Marco.org:        X              X    | 2
Medium:           X              X  X | 3
The Verge:           X  X     X       | 3
TechCrunch:             X  X          | 2
NYT:                 X                | 1
The New Yorker:      X     X  X       | 3
The Atlantic:        X        X       | 2
TNR:              X             X   X | 3
------------------------------------------
                  3  4  2  2  3  3  4

There will always be people who are going to nitpick every minute detail of this post, but do remember that this isn’t meant to be taken as serious, exact science. Big picture, people.

Geoterrorists

Wanted at The International Criminal Court of Hague for destroying the rainforest and depleting toners across the world:

  • Marco.org
  • Medium
  • The Verge
  • The New York Times
  • The New Yorker
  • The Atlantic
  • The New Republic

Special mention goes out to TechCrunch who’ve gone green in the worst possible way.

Find a Place in Your Heart for print.css

There is something ironic about how the current situation appears to be that, in order to read an article in the best way, you have to read the online print version—assuming it’s available. This won’t carry any advertising at all to an audience that generally has become quite adept at reading a regular article while ignoring everything surrounding it, whereas such content will obstruct the reading of it in print. It is this odd bastardized mix between the regular online article and a printed edition of it.

Does it make sense to provide a so-called “print version” of an article freely available for a digital audience who might prefer it to the regular edition? Does anyone seriously not prefer reading the print versions of the articles on The Atlantic’s website?

I’d love to hear what the thinking behind this is, because I’m sure there are many compelling arguments in favour of doing it the way the newspaper and magazine websites do. Do people print entire webpages, replete with bells and whistles? Is the demographic of people printing articles or those who use the print versions negligible? But won’t these people just use Readability and Instapaper anyway? Again, it’s a numbers game, and as an outsider, I don’t know what the numbers-based reality looks like to the people with the data.


I could never imagine “blogs” or “personal websites” by solo writers such as Gruber and Kottke to come with print versions of their articles, but I do expect them to support the habits of people who prefer to read longer articles in print. Although they don’t come with a JavaScript-based “Print” button—because they presume their audience’s demographic to know how—they support an idea of a printable web that’s closely aligned with mine, and which I wonder how could be applied to a wider range of sites.


Because I still think there’s a place for print.css.5


  1. For some reason, I prefer to read books on my iPad with retina, though. 

  2. If you still haven’t bought a laser printer, you haven’t lived. Use the recommendations by The Wirecutter to pick one.

    Be aware that your wireless laser printer probably doesn’t work with AirPrint, so check the compatibility list, if this is important to you. 

  3. This is what a blank paper looks like—feel free to use it as a template for fake historical documents. 

  4. Medium do support comments, but in a very weird per-paragraph manner. It’s intended as a tool for co-editorialism rather than a discussion of the topic itself. 

  5. As another experiment I’m playing around with, I’ll try to continue this discussion on App.net as an alternative to regular commenting services and sites I find to be consistently counterproductive. Hit me up @pessimism