February 18, 2006

Printing a Logo

Question: Do you use image replacement for site logos? I do when I can, but clients sometimes object to this approach, for understandable reasons. The problem is printing. The image replacement method I favor (Phark Revisited) incorporates the logo as a background image from the stylesheet. However, background images don't appear on printed webpages. My default solution is to approximate the look of the logo by styling the logo text in the print stylesheet, but clients sometimes balk at having their logos replaced.

Now, one can always include the logo in the markup and forget about image replacement, but this negates the advantages of image replacement; chiefly, having the logo text indexed by search engines (an advantage magnified when one marks up the logo within an <h1>).

It's the usual battle of tradeoffs: Which matters more—a logo that prints nicely, or better search results? In most cases, I would choose better search results, particularly since users don't expect webpages to print perfectly. At the same time I understand that clients want their logos to appear as designed on printed pages.

However, even when one includes a site logo in the markup, printing can—and often does—go awry. Frequently, logo backgrounds are "knocked out" so they blend seamlessly into the background color of the header. (This technique prevents cases in which the logo background color renders subtly differently than the surrounding background color, despite both colors being the same.) Knocked-out logos look perfect in graphic browsers but can often look like crap on printed webpages. What to do?

Dan Cederholm uses a clever solution to this problem on SimpleBits. He includes a print version of the logo in the markup, which he hides by setting its width in the main stylesheet to 0. Meanwhile, he brings in a knocked-out version of the logo as a background image of a <span> that wraps around the logo image markup. The knocked-out logo appears in browsers; the print version appears in print. Semantically, the <span> is meaningless, but otherwise this is impressive sleight of hand. I plan to use Dan's technique from now on, whenever clients balk at image replacement.

Published in CSS, Design, Web Standards