Why Pixel Perfect is Impossible: The Web is not Print
For my latest article, I’ve decided to start a new series about the myth of pixel perfect web design. The first part of this series will look at some of the ways in which web design differs from print design.
Thinking about the web as if it were print is fairly common – yet thinking about it that way is almost completely pointless. One example of this was discussed by David recently in his ‘What Size is a Website’ article. To further illustrate the point, I’m going to take a list of design guidelines from a fake client and use them to give a few more reasons why the web is not print.
Our logo must be displayed at a size of 15 × 4.5 cm at the top left of the page
If you’ve read ‘What Size is a Website’, you should have an idea of why this might be a problem. Put simply, whilst the logo can be made to display at 15 × 4.5 cm on one computer, it most likely won’t display at the same size on other computers.
On average, the display resolution of a computer monitor is approximately 100 ppi (pixels per inch); however it can range from as low as 50 ppi up to about 200 ppi – and that doesn’t include devices like the new iPhone 4. As a result, the logo could display at any size between 7.5 × 2.25 cm and 30 × 9 cm on normal computer screens – and even that doesn’t take account of the user zooming in or out on the page!
Banner backgrounds must be Pantone 272
Ah, colour. You might think that anyone who has tried to buy a tin of white paint, only to be confronted with about a hundred different shades which aren't actually white would realise that this could be a problem. In the world of print though, if you asked for Pantone 272 that is what you’d get.
On the web is a different story. Most Pantone colours can be replicated by a computer without any problems, but colour is very difficult to get right for a computer. Putting aside the fact that print uses a different method of mixing the primary colours to a computer monitor, the main problem is that consumer level monitors are, on the whole, terrible at reproducing colour accurately. Generally, no two monitors will display a particular colour the same, even if they are both the same model. As an example, I have two ViewSonic VE700 monitors sitting on my desk as I write this – one has noticeably warmer colours, i.e. neutral shades like white appear to contain more blue on the other monitor.
As such, what one monitor thinks is Pantone 272 might actually be closer to Pantone 264, whilst another displays Pantone 275 – the general colours, like green, yellow or orange (for example), can be somewhat relied upon but specific shades such as apple, barley or mandarine cannot.
By the way, Pantone 272 is a light lavender colour, and isn’t remotely suitable for use as a background colour as it’s still quite vibrant. I just picked a random number to use!
Headings must use PF Centro Slab Pro
It’s quite typical for a company to use a particular typeface for specific pieces of text, but this cannot always be achieved on the web.
The problem here is that for text to be displayed in a particular font, that font has to be available on your users’ computers. There are about 12 fonts that we can be reasonably confident that a typical user will have available – PF Centro Slab Pro is not one of them. Since it is a commercial font costing $79 for each weight (light, regular, bold etc.), we cannot expect users to have a copy available.
The technology does now exist to display new fonts like PF Centro Slab Pro to users by embedding the font in the web site, but there are a few problems. Firstly, only the very latest web browsers (with the exception of Internet Explorer, which has supported this for a while) actually support this, and even then three or four different versions have to be obtained to make it work. The greater problem though is that of licensing – most commercial fonts, including PF Centro Slab Pro, explicitly forbid any use in this manner. So, whilst in many cases it is technically possible, legally it isn’t.
Conclusion
As you can see, none of the design requirements could be successfully met on the web – but all could be easily achieved in print. The key is to stop thinking of websites as a magazine or book where you have total control over how it looks, because you don’t.
We understand this, and therefore we can create web sites which do live up to the guidelines you give us – you just need to be willing to give up the security of the world of print!