f o n t s   f o r   t h e   w e b

When Henry Ford remarked that you could buy his new Model-T automobile in any colour, as long as it was black, nobody was too concerned. Neither did the fact that they could have any shape as long as it looked like a horse-drawn carriage - without the horse. Thankfully, modern cars look nothing like their horse-drawn counterparts. I suppose you could call that "evolution".

When movable type was first introduced in the middle of the fifteenth century, it is not surprising that the letterforms mimicked the hand-drawn characters that preceded them.

Later, when what we have now come to recognise as serif typefaces were introduced, it must have been very difficult to manually carve those fine, tapering shapes into hard metal to make the punches. And why? Although letters carved in stone benefit from serifs to stop the strokes from splitting, there is little logical justification for appending them to metal type yet "Roman" serifed letterforms were the norm for many centuries. Although letters without serifs were not unheard of, they didn't really come into popular use before the halcyon days of the Bauhaus in the 1920s.

e a r l y   c o m p u t e r   t y p e

Today, most typesetting is done with computers and most of the typefaces we see have either been designed some time ago, or are based on such designs. It is hard to believe that the ubiquitous "Garamond" font was designed in the sixteenth century and is still very much alive and kicking today in one form or another.

Early computer typesetting systems made no attempt to represent the actual character shapes on the screen. They used a generic screen font for mark-up and editing and the computer just controlled a mechanical device that did the actual typesetting.

In the mid 1980s, something revolutionary happened. Apple introduced an affordable computer that could display different fonts on the screen and the principle of "What You See Is What You Get". At first, this was very true because what you got when you printed was literally a screen dump, or at best, a doubled-up resolution of what you saw.

All fonts were screen fonts on the original Apple Lisa and Macintosh computers. Many of them were specially designed for Apple by Susan Kare - http://www.kare.com/MakePortfolioPage.cgi?page=4 - and I think they still represent the pinnacle of clarity and readability for on-screen type display.

It wasn't until the introduction of the LaserWriter together with its underlying Adobe PostScript technology and the seminal Aldus PageMaker and Adobe Illustrator that WYSIWYG printing was taken seriously, but there was a problem and it still persists today.

m i m i c k i n g   p r i n t   t y p e   o n   s c r e e n

Computer screens are relatively low-resolution devices. It all comes down to economics. We have the technology to produce screens of much higher than the typical 90 pixels per inch that is so common, but doubling the resolution would require a quadrupling of memory requirements because we are talking about area not linear measurements. Where a 300 pixels per inch screen is perfectly feasible at the moment, it would require about nine times as much video ram and a similar increase in processing power and would be very expensive.

So, for the immediate future, we are stuck with having a low-resolution preview of a typestyle on the screen, which prints out at a high resolution on the typesetting device to provide the kind of image quality we are looking for.

s q u a r e   p e g s ,  r o u n d   h o l e s

Now, so far I have been talking about publishing on conventional paper media but more and more publishing is now done on-line. The "medium" is a low-resolution computer screen. Unlike the print preview you get in Quark XPress, this is it. What you see is *exactly* what you get!

Unfortunately, most of the typefaces used in Web browsers are ones designed for print - Times, Helvetica, Arial etc. Times and Helvetica just happen to be two of the fonts that were built-in to the original Apple LaserWriter, a 300 dpi device, and found their way into just about every manufacturers' printers eventually.

PostScript fonts come in two parts - a screen font, and a resolution independent printer font. The screen fonts are usually provided at a number of type sizes - 9, 10, 12, 14 points. They are absolute pixel-by-pixel designs and not scaleable. If you look at 12 point Helvetica on a Mac, it looks reasonable because it has been handcrafted as a 12-point bitmap font. The same goes for any of the other sizes provided. But, try to use an 11 point or 15 point setting; it will look awful because the bitmap font is scaled mathematically to the chosen type size. As a preview, it is acceptable because you know it will print okay, but you have to live with the ugly approximation on the screen.

TrueType fonts don't have a screen version and a printer version; they just have one scaleable outline description. The screen font is always calculated from the vectors that describe the outline of each character. A process called "hinting" attempts to improve the look of the screen font generated and indeed, certain fonts have been optimised for screen display by making the letterforms more sympathetic with the natural pixel grid of the screen. Prime examples are Matthew Carter's Verdana and Georgia, which were hand-hinted by Thomas Rickner.

http://www.microsoft.com/typography/web/fonts/verdana/default.htm

The squarish shapes with long, straight strokes avoid the problems associated with trying to fit round pegs into square holes.

a n t i - a l i a s i n g

Forcing typefaces designed for high resolution printing onto a low-resolution screen involves compromise. Pixels are square. Typefaces generally have curves. To avoid nasty jagged edges on fonts, we can simulate the effects of high-resolution display using "anti-aliasing". "Aliasing" is the undesirable effects you get when resolutions conflict, not just on computer screens. It happens in digital audio and when spinning wagon wheels seem to be rotating in the wrong directions in cowboy movies.

By introducing intermediate tones into the stepped edges of fonts, they can be made to look smoother and when we are talking about reasonably large font sizes, this works very well. At the smaller sizes typically used for general text, anti-aliasing affects not just the edge of the type but the whole stroke, making them look soft and blurry.

When a horizontal or vertical stroke coincides with the pixel grid, it looks sharp and solid. If the stroke is off-grid, it is smeared across two or more rows or columns of pixels. In reality, text like this rarely fits the grid except in a few places and the rest of it suffers from various degrees of blurring giving an unfortunate "wooliness" to the whole block of text.

The quality of anti-aliasing you get depends on a number of factors. Software producers have different techniques, or algorithms, to calculate the optimal tonal values for the intermediate pixel colours in the anti-aliased "fringe". The same setting done in Photoshop, Fireworks and Flash will look completely different.

As type sizes decrease on a computer screen, it become more important that they fit the natural pixel grid of the screen or "the fuzzies" take over.