CoffeePowered

Printable logos

This is one of those tips where I think “surely everyone knows this already?” but it’s a solution to a problem that I found which was quite neat and I’ll use all the time from now on.

When it comes to embedding a company logo into a page, quite often the logo won’t be suitable for print. For example, the website may be dark and the logo might be light and while this works fine when the site is viewed on-screen, it can look out of place when used in a print stylesheet or if the site is viewed with CSS disabled.

While building the new University of Leeds corporate website we got to the stage where we needed to build our print stylesheet, the page header has a white logo on a dark background.

Originally, the logo was inserted into the design using a standard CSS image-replacement technique:

1
2
3
<div id="logo">
    <h2><a href="http://www.leeds.ac.uk">University of Leeds</a></h2>
</div>
1
2
3
4
5
6
#logo a {
    background: url(logo_black.png) no-repeat;
    height: 53px;
    text-indent: -9999px;
    width: 184px;
}
Light logo on dark header

Light logo on dark header

When you’re using a CSS image replacement, the image doesn’t exist in the markup, it’s applied as a background image and only the h2 text is displayed. We toyed with the idea of using the same image replacement technique in our print.css, replacing the logo with the black-on-white variant. This quickly fell on it’s arse, as most browsers are set by default to not print background images as seen below.

Image replacement with CSS disabled

Image replacement with CSS disabled

Putting the image back into the markup

In order to get around this, we decided to stop using image replacement and go back to having the image in the markup. Initially I was curious as to the effect of this from an SEO standpoint and had a quick chat with an SEO friend about the disadvantage of not having our corporate logo as a heading. He pointed out that there would be no disadvantage to us as we’re not trying to rank on the ‘University of Leeds’ as a keyword and that as it’s mentioned everywhere else in the thousands of pages we manage, it’s not going to make a difference. (Your mileage may vary and this might not be suitable for everyone)

1
2
3
<div id="logo">
    <img src="logo_black.png" alt="University of Leeds logo" />
</div>

Doing it bass-ackwards

Once we’d put the image back into the markup, it showed up as expected in our print stylesheet, however our white-on-black logo wasn’t really suited.

Same logo with CSS disabled

Same logo with CSS disabled

We already knew that we couldn’t use CSS to replace this with the black-on-white logo in our print.css, so we decided to do it the other way round. Rather than the have the white-on-black logo as default, we changed to having the black-on white as the default meaning that our no-css and print.css got the correct logo. We used a “hidden” class so we could hide the default image and a CSS overlay on the anchor tag to bring back our white-on-black logo to fit in with the rest of the design.

1
2
3
4
5
<div id="logo">
    <a href="http://www.leeds.ac.uk">
        <img class="hidden" src="logo_white.png" alt="University of Leeds logo" />
    </a>
</div>
1
2
3
4
5
6
#logo a {
    background: url(logo_black.png) no-repeat;
}
.hidden {
    display: none;
}
Light logo on dark header

CSS enabled

Black on white logo

CSS disabled / print stylesheet

Conclusion

Because most browsers disable background images when printing by default, you need to be aware that any important images that are using image-replacement techniques may not work. Working around these limitations is possible with a bit of planning.

This entry was posted on Friday, August 7th, 2009 at 19:33 and is filed under CSS, Design, Development, Tips and tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

You should RSS feed icon subscribe to future posts and Twitter follow me on Twitter

8 Responses to “Printable logos”

  1. Ad Taylor says:
    11/08/2009 at 13:24

    Good call — I have been thinking about this myself recently too.

    The issue I see with this is that you have made your mark-up less meaningful. Striping out the header tag and the ‘University of Leeds’ text. OR am I missing the point and you are going to use both the H2 image replacement and the hidden image?

  2. Stanton says:
    11/08/2009 at 13:31

    I know this has the potential to evolve into a semantic debate so I’d be interested in hearing wether people would still keep a header tag in with the logo.

    Because our logo also contains the “University of Leeds” title I chose not to include a header tag also.

    I’d think as long as the logo has the neccesary alt tags and title attributes then this would be enough meaningful markup, our pages have title attributes along the line of “Page title – University of Leeds” and are chock full of metadata, both general and Dublin Core

    I wanted to avoid a situation where if CSS was disabled, then the user would get the logo (which has the UoL text) and a header tag repeating the UoL text).

  3. Yaili says:
    11/08/2009 at 15:08

    I still struggle when I’m not allowed to use the h1 tag for the logo, or company’s name. It feels awkward to place it in a random div.

    As for the print stylesheets, I tend to use either image replacement on the h1 tag or add an image inside the h1/div#logo.
    I also add a hidden div bellow that with the printable version of the logo, usually black and white.
    So when you print it you’ll get the title of the page (that comes with the alt of the image or the text within the h1) and then the logo.

    I guess it depends on how you think your website is going to be used when printed, but this is usually good enough for my projects :)

  4. Stanton says:
    11/08/2009 at 15:38

    @yaili that’s quite a nice solution, it wouldn’t be ideal for the UoL site I don’t think, but I might borrow that one for other projects :)

  5. Medden says:
    13/08/2009 at 14:00

    Just a quick question about this method.
    Don’t google check for display:none entities and ignore their content?
    Otherwise it makes very it easy to stuff keywords high up in H1 tags on any page, and just hide that with css.

    Using two methods like this also leads to much confusion if the logo is ever updated at a later date.

    I would personally just put a css border round your white for the print.css I think borders still print out.

  6. Stanton says:
    13/08/2009 at 18:43

    Thanks for your input! As I mentioned, this site would naturally rank for the ‘University of Leeds’ keyword in google, and I did chat with an SEO friend of mine who pointed out that there’d be little to no disadvantage in not having this as a H1 tag for our situation.

    A CSS border wouldn’t really solve the dark logo on white backround issue, so we’d still need two logo’s regardless of method so it’s not really causing us more work to maintain this in the long run.

    For most situations I’d agree that this might not be suitable for everyone, but hey, it might be useful for someone :)

  7. Bjørn Johansen says:
    14/08/2009 at 08:25

    Some browsers (Opera at least) does not download (and cache) images that has display:none, so on the print version the image will be missing.

    I’m using a small js to fix this:

    var img = new Image(‘logo_white.png’);

    This way the browser will download the image and correctly display it on the print version.

  8. Stanton says:
    14/08/2009 at 08:56

    Aha, interesting! I’ll have to look into that :) cheers!

Leave a Reply