Paper vs. Pixels - Part 2

by Joe Gillespie — Sep 1, 2004

Last month, I started examining some of the vital differences between designing for print and for the Web and explained how a Web page has no specific dimensions. Now, we'll look at some other factors that seem equally nebulous but have to be understood and accommodated.

Font sizes

I covered type and font issues pretty extensively in the July editorial but one important aspect that I didn't go into was font size. It's bad enough that the working area on the screen is changing from one machine to the next. If the font size is changing too, how can you nail anything down?

CSS allows you to specify font sizes in several ways. Forget points. Points are only relevant when you are printing and are as meaningless on a computer screen as the inches they are based upon.

The more appropriate font sizes for Web pages are either 'relative' (Em, %, smaller/bigger) or 'absolute' (pixels). Even pixels are not really absolute because of the variance of screen pixel densities – Pixels Per Inch (PPI).

If a site is aimed at the widest possible general audience, it's not a good idea to fix the font size in pixels. As this particular site is aimed at 'designers' and discusses 'visual' issues, the viewing situation is a bit more predictable so I allow myself the 'luxury' of specifying the font size in pixels.

Graphic designers are fussier about how things look than the general public, just in the same way that a musician will be much more annoyed by bum notes than someone dancing at a party. Anyway, it's not the kind of site you would want to read in the back of a car with a handheld PDA and won't be of much interest to the partially sighted. Other sites are!

Most modern browsers allow type to be resized with a click of the mouse or key combination, even if it is specified in pixels. The significant exception is MSIE 6, which doesn't – yet. Opera allows you to zoom in and out of the page and the images resize in step with the type, which maintains the relative proportions but Web images don't scale well and can look quite nasty at any size other than the normal 100%.

All other browsers resize the type but leave the images at their original sizes, which is a better compromise but still has two downsides. Firstly, it changes the relationship between type size and image size. Depending on your design sensibility, this could bother you. If you've put a lot of effort into getting the balance just right, changing the type size can throw everything out. Some people might not be bothered too much, designers will.

The second, and seemingly more serious problem is that a block of type no longer fits its allotted space. It reflows, overflows and generally looks a mess. The mistake here is that concept of an 'allotted space'. Such a space is finite and predictable on a printed page. On a Web page, it is much less so. You need to build-in leeway in terms of column flexibility and 'buffer zones' that take up the slack. Unlike a printed page where it is a luxury, white space on a Web page is cheap and can be used creatively. Why don't more people use it? It can solve most type-fitting problems.

Anyway, do check what your page looks like if the type size is changed away from 100%. Try 90%, 120% at least (and maybe 150%) and see what happens. If you have 'locked' the column width and/or height, you could be into an overflow situation. See last month's Where does the overflow go? You can control it a little more predictably with CSS.

The other thing to watch for is line breaking, especially where you have introduced the breaks yourself. If you don't have the slack, you can end up with very strange looking settings. On a Web page, there isn’t very much you can do about widows and orphans. They might happen in one browser but not another. You have to live with that!

Always give type lots of elbow room and accept that it won't necessarily be seen at the size as you expect no matter what you do!

Colors change

Like everything else, colors used for print are fairly predictable provided that you don't judge them on your computer screen.  You can look-up CMYK percentage tables to see what various proportions of the four inks give on different paper stocks. You can use a spot color swatch book to choose solid colours or percentages of them. This is all basic stuff for print designers. When it comes to situations where colour MUST be accurate, such as in clothing catalogues or in packaging work, designers use expensive calibrated monitors and additional costs will be budgeted for at the proofing stage or even on the print run.

Color on the Web is better now than is was a few years back. Monitors and video cards are more accurate and cheaper than they were and the compromises introduced with dithered 8-bit images everywhere have now almost disappeared.

Five years ago, when this site was on a dark blue background, I would continually be surprised by people describing it in emails as 'black', 'purple' or 'maroon'. Then, one day, a client showed me another familiar site on his ‘budget’ PC laptop. Any colour lighter than #ccc reproduced as white. Anything darker than #333 was black. Where this wouldn't be a problem for word processing or other office tasks, it would have been totally useless for any design work and was only useful for Web surfing because he was totally oblivious to the fact that he had such a restricted palette.

Ignorance is bliss.

Today, most systems can handle 16 or 24-bit colour. The differences between Mac and PC gammas are not so marked as they were but people who work at a gamma of 1.8 for print should use a more appropriate 2.2 gamma for Web work.

There will still be differences. The colour reproduction of cathode ray tube monitors and LCDs gives the biggest jump and there can be quite considerable variations within either of those depending on manufacturer, price and age. A dim CRT monitor might be good for print work because it more closely resembles the effect of a printed page, but it’s not typical. Modern LCD monitors are much brighter, have more contrast and are generally crisper – unless they are on laptops, in which case brightness will probably be sacrificed for battery life. Low cost PC laptops still continue to give mediocre color reproduction because of cost constraints.

Again, the advice is to check your pages on as many devices as possible. Watch out particularly for bleached-out highlights and filled-in shadow areas and remember that any RGB colour in these extremities can shift in hue also because the red, green and blue values don't necessarily diminish in the same way. Where mid-tones might be acceptably accurate, the further off you go, the more chances there are of a troublesome colour shift.

Resolution

We all know that full color printing is done at 300 dots per inch, or thereabouts, and that line resolution can be one or two thousand dots per inch. Unless you are printing on plastic or using silkscreen, printing resolution is rarely of any concern to the designer and only affects the quality, not the size of the finished product.

On a computer screen, resolution affects both quality and reproduction size.

Screen resolution on desktop machines doesn't vary drastically. The pixel density is usually somewhere between 90 and 100 pixels per inch. This range is determined by cost/quality factors. There is no great improvement in quality once you go over 100 ppi but the price of producing the monitor goes up dramatically. A monitor of twice this resolution would have four times as many pixels and requires a corresponding amount of video memory to address it. Remember, it's area we're talking about, not linear distance.

Apart from the increase in pixel numbers, a substantial amount of the production costs goes into the units that are rejected because of bad pixels at the time of manufacturing. The bigger the monitor, the more chances of duds and rejects.

For LCD monitors, there is a 'sweet' resolution where every pixel on the screen maps exactly to a pixel in memory. Although the overall screen resolution can usually be changed, images have to be interpolated to work at other resolutions and the image quality is compromised. It is best to leave an LCD screen at its natural resolution unless you have a really good reason to change it. I can't think of many!

Some people crank-up their screen resolution to gain more screen space 'on the cheap'. Of course, this makes everything on the screen smaller. They then compensate for the small type produced by adjusting the system font size. So the apparent type size is back to 'normal' but images are smaller.

Whoops, there goes any concept of relative type/image proportions.

When you leave the relatively safe environment of desktop monitors, standards go out the window. Laptops, palmtops, PDAs, cellphones etc. all have non-standard resolutions. You can't count on anything other than that the browser will try its hardest to display a 'properly' constructed Web page. That means, one where the content and styling are completely separated – you supply the content, the browser presents it. Your usual concepts of ‘graphic design’ hardly enters into the equation. You could provide a special CSS file for such uses but chances are that you won't.

Next month, we'll look at navigation, plug-ins, browsers and other things that print designers don't have to worry about!

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float