y

Mike West: Writing, editing & design for business & technologyputting words, pictures and people together

 
   
 

Fonts, schmonts.

A lot of words are wasted in pointless ruminations about choosing typefaces for text on-screen. Instead of naively following some obsolete, mystical-romantic ideas about fonts carried over from the world of high-resolution printing, our time would be better spent trying to understand what really goes on where the eyeballs meet the photons. Phosphors. Whatever. Instead of relying on some mythical-magical “personalities” of fonts to somehow do our communicating for us, we could be learning how to design more readable, more effective text displays by manipulating the things that really matter on a CRT screen: character height, contrast, weight, line-spacing, column width, and other critical factors.

Throwing down the gauntlet in the face of this silliness, computer type expert James Felici writes:

I challenge any panel of type experts to look at screen type representing 20 common text faces at text sizes and identify them correctly; they're all so similar because there aren't enough pixels available to differentiate them meaningfully one from another… Creating legible screen type with the number of pixels afforded by 72 or 96-point resolution is an exercise in optical illusion. The eye has to be tricked into recognizing a handful of dots as being our old familiar alphabet.
 http://www.will-harris.com/typofeli.htm

Let’s see what Mr Felici is going on about. Instead of taking anything on faith, we’ll trust only the evidence of our own eyeballs.

One of my favorite typefaces for body-text in high-quality printed books has long been Garamond. It is elegant and refined—full of graceful curves and slants, with a sinuous, hand-tooled look. Take a look at the following bit-mapped versions of Times New Roman (top) and Garamond (bottom).

You can probably see from this example that where Times has thick strokes, straight lines, flat feet, and a businesslike, hurried look, Garamond is all elegant curves and nimble turns. It even has arched feet, like a dancer.

Greater magnification will reveal even more subtleties. Below are the uppercase As from the two typefaces, first Times, then Garamond. Note especially the crossbar, which in Times is solid and straight as an I-beam, but in Garamond looks hand-sculpted. Compare the diagonals as well: Garamond has tapered, subtly bowed strokes where Times has stovepipes. (Those curves would be smooth and fluid in traditional printing; here they are jagged because of limitations of this medium.)

These are the kinds of subtle details that give a great typeface its own character. This personality comes through on the printed page—but how well does it survive being chewed up and spat out on a video display at 96 dpi?

Well, have a look. Below are our two lines of type as they actually appear on a computer screen at 11 points, captured directly from a Microsoft Word document. I have magnified them in order to show exactly what is really there and what is (in Mr Felici’s phrase) only ‘illusion.’ This, ladies and gentlemen, is what actually presents itself to our gaze when we look at text-sized Times and Garamond in a Web browser,  word-processor, or other typical Windows application window:

Grim, isn’t it? A bloody mess, you might even say. Not a curve anywhere. No variation in stroke weight. The ‘serifs’ are as fat as the main strokes. Just ugly black squares, like paving stones, and between them, gaps big enough to drive a truck through. Well, okay, a really small truck.

So now what do our eyes tell us? It looks like James Felici was right: there just aren’t enough pixels available at text sizes to render typefaces with anything but the crudest approximations. Even if you could, by some trick of rote memorization, identify these fractured, jagged screen fonts by name, you would have to be hallucinating to think that they have retained anything of their designers’ intentions with respect to rhythm, color, and personality. Trying to process the visual information we are given on a computer screen at normal text sizes can be compared to reading the newspaper through a screen door.

But hold on. In our first illustration above, we demonstrated that it is possible to put a reasonable approximation of a typeface on a computer screen, didn’t we? But now we’re saying that what people really see in a Web browser, word processor, or other typical software application is not this—

—but this?

Yes, I’m sorry to say that’s the way it is. You can, using various image-manipulation techniques, create a bit-mapped version of a piece of text that looks pretty decent (as I’ve done for the first example above). But this is not what your software does when it performs its normal, everyday text display operations. Instead, it spits out a jumble of dots like the last example above. You can prove this to yourself by making a screen-capture at normal text size and then blowing it up in an image editor.

Working with on-screen text requires a complete re-think. Our old books on fine typography make inspiring reading, but what we need to take from them are not the old solutions, but the wisdom and practicality that enabled the great type designers of old to do great things with the materials they had: the ooze of ink pressed into soft paper with metal plates under pressure. What we have instead are flickering phosphors, photons, ambient light, and chunky dots of color from which we are expected to create pages of inviting, readable text. Think of building the Parthenon out of cinder blocks.

In a follow-up article, I’ll suggest some solutions that work better than others.

Top of page  |  More Rants & Raves