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
<divid="logo">
    <h2><ahref="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 headerLight 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 disabledImage 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
<divid="logo">
    <imgsrc="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 disabledSame 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
<divid="logo">
    <ahref="http://www.leeds.ac.uk">
        <imgclass="hidden"src="logowhite.png"alt="University of Leeds logo"/>
    </a>
</div>
1
2
3
4
5
6
#logo a {
    background:url(logoblack.png)no-repeat;
}
.hidden{
    display:none;
}
Light logo on dark headerCSS enabled

Black on white logoCSS 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.

comments powered by Disqus