Last week, we delivered some designs to a client who had asked us to refresh the content areas of their website. We worked hard on getting the typography clearer & more readable, and when they saw the printed designs they declared themselves ‘thrilled’ and couldn’t wait to see the styles applied to the website.

Today we went back to the client and showed them the coded pages; to say they were disappointed would be an understatement. I’d worked hard on the typography and was very deflated by their reaction; the fonts appeared too jagged to them; the printed designs we’d shown had aliased fonts, and when I’d tested them on my Mac they looked fine; even on Windows, with its different aliasing, they’d still looked good to me. Obviously we’d commented beforehand that the fonts wouldn’t look the same on screen as they did on paper, but it was still a shock to our client.

The problem was that they were viewing the pages in IE6 on Windows with Cleartype disabled; not the best way to see fonts under almost any circumstance. I explained that IE7 now comes with Cleartype enabled by default, and that Vista also has better aliasing, and that we shouldn’t design websites to the lowest common denominator; I switched on Cleartype to show them again, but they were still disappointed that it didn’t match the designs.

Below is an example of how the font appears differently when un-aliased; the first paragraph shows the text rendered in Firefox 2 on Ubuntu, with font-smoothing turned on; the second is from IE6 with Cleartype disabled:

What was worse was that the problem with the one jagged font caused them to view the whole refresh negatively; we had to take our nice, approved design and go back to make changes. My defence didn’t sway them, so I had to accede to their wishes.

I don’t blame our clients for their reaction; un-aliased fonts do look horrible. What this makes me wonder is: what is the best way to show web designs to a client to stop this happening again? It’s not practical to code up designs before they’ve been approved, and presenting designs with un-aliased fonts both makes it harder for the design to be approved when the emphasis is on the typography, as well as not doing justice to those with systems which do display better fonts.

Perhaps it’s better to show two designs; one with aliased fonts, one without. It’s more work for the designer, but it does a better job of managing the clients expectations of how the finished page will look on screen. If there’s a better solution out there, I’d love to hear it.