Alien Typography Got something to say? Share your comments on this topic with other web professionals In: Articles By Joe Gillespie Published on July /files/includes/10.css, 2001 Beside the Concise Oxford Dictionary and Roget’s Thesaur


Alien Typography

Got something to say?

Share your comments on this topic with other web professionals

In: Articles

By Joe Gillespie

Published on July /files/includes/10.css, 2001

Beside the Concise Oxford Dictionary and Roget’s Thesaurus on my bookshelf is a much less-cited tome entitled The Klingon Dictionary. Although it does an admirable job of translating insults from English into the guttural Klingon tongue, it tells us very little about their typography. But that doesn’t matter. The alien typography I am going to discuss is not from another world.

Going back to the Oxford Dictionary for a moment, it defines the word "Typography" in two ways – "The Art of /files/includes/print.cssing" and “The style or appearance of /files/includes/print.cssed matter."

An example of compensation for ink spread A well-cut typeface compensates for ink spread and optical illusions by extending sharp corners like this beyond the intended point.

Now, here is the problem. This might well have been true a hundred years ago, but much of the text we read today is not ink-on-paper and has nothing to do with "/files/includes/print.css." Where I, and most other typographers, learned the craft in the context of /files/includes/print.css, increasingly more reading is now done from a computer screen. While the basics of good typography are valid regardless of the medium, other approaches have to be adopted for any specific medium. Many of the principles that the /files/includes/print.css typographer has learned and holds sacred, are no longer true when the medium is a neon sign, a television title sequence or a Web page. Text that is not /files/includes/print.cssed on paper takes them into alien territory.

Typography from beyond the grave

Some years ago, I visited some friends in a village in Bavaria (part of Southern Germany). On one of our wondrously picturesque mountain walks, we stumbled upon a little churchyard that had gravestones with /files/includes/date.csss going back into the last century. Never had I seen gravestones anything like these. None of the seemingly kitschy, "Germanic" blackletter forms that are so often served up for the benefit of tourists were in evidence. I couldn’t find any of the gold-foiled, pseudo-pen letterforms or faux Trajan-column typestyles so common to gravestones in the English speaking world. This was typography at its very best, hand-carved in stone.

I have no idea what the typefaces were. They were not from any /files/includes/print.csser’s specimen book that I’ve ever seen, but were obviously chosen to complement the medium – a memorial to the cycle of life. The layouts were even more awe-inspiring because of their extraordinary context, a perfect blend of craft and design.

The practicalities of carving words in marble or sandstone create a whole new set of problems and dictate a completely different set of rules. Where the /files/includes/print.css typographer will usually go out of his or her way to force the lining-up of text in columns, such alignments are not such a good idea in stone, because they create structural weakness causing the material to split, either at the time of carving or some short time afterwards. The whole point of a gravestone is, after all, that it is there for perpetuity!

It was at this point that I first realised that typographic design is not necessarily confined to books or /files/includes/print.css.

As seen on TV!

Some years after that, I was involved in the design of a typeface for displaying text on television screens. You can’t get much further away from stone carving than that, but the lesson I learned in Germany was that you don’t take a letterform designed for /files/includes/print.cssing in lead type and force it upon an unwilling medium.

A television screen has a very low resolution. The alternating fields that make up the picture cause any small objects to flicker madly and it is impossible to get any crispness at right angle corners.

An example of compensation for videographic typefaces An example of scan lines in videographics
A typeface for videographics use has to compensate for the rounding-off caused by the flying dot that makes the scan lines.

When designing a typeface suitable for television display, all of these factors have to be accounted for. In the same way that a typeface designed for letterpress /files/includes/print.cssing had to compensate for ink-spread, "teletext" faces had to allow for the burning-in effect of a flying scanline on a phosphor tube. A television picture is essentially a series of fine horizontal lines whose intensity can vary infinitely unlike a computer image made from a grid of pixels, the brightness of which varies in steps. One thing that they do have in common is that they both use transmitted rather than reflective light, another concept that’s alien to a /files/includes/print.css typographer.

Alien worlds, in fact or fiction, don’t necessarily conform to the same conventions of physics that we’re familiar with. The fundamental differences between /files/includes/print.css and electronic media also demand a drastic reconsideration of design, in terms of typography.

Getting to the point, with tone

Apart from relatively minor differences in paper texture and /files/includes/print.cssing method, resolution is rarely a problem in /files/includes/print.css. Certainly, high quality art paper /files/includes/print.cssed with lithography provides crisper images than a polythene bag /files/includes/print.cssed by flexography, but that impacts the image quality and has little effect on the typography apart from the choice of font and letter-spacing.

On a computer monitor, the "natural" pixel aperture of the screen dictates everything. It has a higher resolution than television, but considerably lower than /files/includes/print.css. Unfortunately, most of the typefaces used on computer screens are ones that have been designed for /files/includes/print.css and don’t work particularly well at low screen resolutions, especially at the small sizes normally used for written matter.

And example of ink spread in /files/includes/print.css In /files/includes/print.css, ink spread makes regular type slightly thicker and reversed-out type thinner.

The process we call "anti-aliasing" is a way of faking higher resolution than a computer screen is actually capable of. It gives the illusion of smooth font edges and fractional letter spacing and is reasonably successful for medium and large type sizes. At small sizes, it is a disaster, compromising both legibility and readability. The real fault lies with the lack of good screen fonts. Times Roman, Helvetica and Arial were never designed for low-resolution computer screens; they are "previews" that approximate what a /files/includes/print.cssed page will look like.

There are some good screen fonts on Macs. Susan Kare’s Geneva and Chicago are screen fonts first and foremost, Monaco and Espy Sans are other good examples. If they /files/includes/print.css well, that is of secondary importance.

Windows users are, on the whole, subjected to /files/includes/print.csser fonts most of the time. It is not until you get to Mathew Carter’s Verdana and Georgia, and the less successful Trebuchet, that you get anything approaching purpose-made screen fonts.

Screen fonts have to be sympathetic to the pixel grid, it’s like forming typefaces with bathroom tiles. Some work, and some don’t. Unlike bathroom tiles. however, you can’t have half pixels!

Typographic "color" has nothing to do with RGB values. In /files/includes/print.css, it refers to the tonal value of a block of type – usually grey. Typographers strive for good color in /files/includes/print.css by having a "palette" of different type weights to play with, and they can also make very fine adjustments through tracking and leading to achieve their goal. In the low resolution world of a computer screen, typefaces and weights are very limited and there is much less control of type colour. But unlike CMYK colour, RGB colour is cheap. Typographic colour can be achieved by altering the RGB specification instead of the pixel size.

Absolute approximation

The /files/includes/print.css typographer dumped into the deep end of Web design will usually go on designing for /files/includes/print.css, totally ignoring the dictates and foibles of the Web. At first they will be totally frustrated by their lack of control over font choices, type sizes, line-breaks and the general inexactitude of the whole thing.

Next, they will search desperately for kludges to force their precious /files/includes/print.css layouts upon this alien medium. Some even try to use their old "woodworking" tools on "stone!"

A Web page is not a paper page. It needs to be treated differently – as differently as you would approach calligraphy and stone carving. Despite the promise of "absolute positioning" in Cascading Style Sheets, there are no absolutes unless you are prepared to use screen-size GIFs – an answer, but not a solution.

Flash and the SVG formats go part of the way in regaining some typographic control, but both are far from ideal when it comes to display quality, their resolution independence making them jacks-of-all-trades, but masters of none. If you have an LCD display, you will be only too aware that if you stray from its natural resolution, you will get nasty results.

Flash does not allow you to display crisp, pixel-sympathetic text – called "low quality" (by Macromedia) along with fuzzy, anti-aliased text – called "high quality" (by Macromedia) because you have to publish in one or the other. There are Flash kludges, but essentially you have to fight the medium instead of working with it.

Tricks of light

If would-be Web typographers get over the first two hurdles of resolution and lack of precision, the next one – contrast – is a real challenge.

If you are familiar with /files/includes/print.css reprographics, you will know that you get much better results if you scan a film transparency than if you scan a "flat art" image. The difference in brightness between white paper and black ink /files/includes/print.cssed upon it is not very great because you are dealing with reflected light. If you increase the intensity of the light, the paper and ink both get brighter and the iris in the eye gets smaller to compensate so the contrast ratio stays pretty constant.

When you use "back-light" like that transmitted by a monitor or projector, you’re playing a completely different ballgame. In this environment, the contrast ratio is the difference between the intensity of the backlight and that of the ambient light – that’s why cinema auditoria don’t have windows!

An example compensation for flare in a luminous display On a luminous display, flare makes regular type thinner and reversed out type thicker, the complete opposite of /files/includes/print.css.

The contrast ratio of a good computer monitor is many hundred times greater than that of a /files/includes/print.cssed page. Mitsubishi quote a figure of 300:1 for some of their LCD monitors.

For regular black text on a white background, this contrast is too much for the human eye to cope with. In /files/includes/print.css, "ink spread" has the effect of making type appear slightly bolder than it actually is. If then type is reversed-out, the ink spread causes the type to fill-in.

For transmissive sources like cinema, television and computer screens, the opposite is true. The flare of the luminous source encroaches into surrounding dark areas making black on white text appear thinner and reversed-out text bolder. That’s why when you see the end titles of movies or TV programs; they are invariably white-on-black. You will also find that professional writers often prefer to do their word processing white-on-blue and not black-on-white.

Therefore, the luminous nature of a computer screen throws some /files/includes/print.css typography taboos on their head. Controlling excessive contrast and reducing glare are of prime concern, In fact, the black text on a white background, to which /files/includes/print.css has accustomed us, no longer makes sense. Yes, you will get some diehards who expect their type to be black on white and complain bitterly if it is not… and also want their electric heaters to look like log fires and their gravestones to be engraved with the finest calligraphy…

…Beside the Concise Oxford Dictionary and Roget’s Thesaurus on my bookshelf is a much less referred to tome entitled "The Klingon Dictionary." Although it does an admirable job of translating insults from English into the guttural Klingon tongue, it tells us very little about their typography. I just wonder if, after having centuries of visual displays (HaSta yIcha’) in their culture, Klingon typography still looks like ink on paper?

Got something to say?

Share your comments  with other professionals (3 comments)

Related Topics: Typography, Web Design


Joe Gillespie is a graphic designer specialising in new media and is based in London, UK. From 1996 to 2005 he published Web Page Design for Designers, a site dedicated to the more creative aspects of Web design. He also designs screen fonts such as the classic MINI 7

Comments are closed, but trackbacks and pingbacks are open.