Pixel Fonts Explained
by Joe Gillespie, Reader rating: 8.2
Joe Gillespie is a graphic designer who specialises in electronic media and is based in London, UK. Since 1996, he has published Web Page Design for Designers, a site dedicated to the creative aspects of Web design.
He also runs a font foundry, MiniFonts.com providing fonts for screen based media including the Web, phones, PDAs and electronic display devices.
If you've ever tried setting text in Flash at small sizes, you will probably have been very disappointed. Flash's over enthusiastic anti-aliasing makes small type look like an out of focus photograph. The problem comes from using fonts that were designed for printing and not specifically optimised for screen display. Printer fonts are intended to work with high resolution output devices not on low resolution computer screens.
On the other hand, fonts that are designed for optimal screen display are going to look chunky and pixelated if they are printed. They are two different media and although you can compromise, the best fonts for screen display at small sizes are crafted pixel by pixel by experienced designers. That's why they are called 'pixel fonts'.
Before I start discussing pixel fonts and providing some tips for their use, it helps to first have a look at computer type in general to put things into perspective.
At one time, all computer fonts were pixel fonts. Well, everything you see on a computers screen is made up from pixels but, at that time, printing was performed by dot matrix printers and the printed output was a dot for dot copy of the screen image.
After dot matrix, came the various golf ball and daisy wheel printers offering printed output more closely resembling that from a typewriter, but on the screen, you still had pixels.
In 1984, Apple introduced the Macintosh computer and gave us the concept of 'What You See Is What You Get'. At last, there was something very close to traditional printer's type with different typefaces, weights and sizes. The Apple ImageWriter dot matrix printer still echoed the pixels on the screen but could do so at 144 dpi - twice the screen resolution - giving smoother results than a straight screen copy.
When laser printers, capable of 300 dpi, or more, came along in the mid '80s, along with Adobe PostScript and Aldus PageMaker, any PostScript font was supplied in two parts; a resolution independent, outline printer font and a low resolution bitmap counterpart. The bitmap (pixel) font gave an approximation of the high resolution printer font allowing designers to see a rough preview of how the page would look when printed. Usually only supplied in two or three sizes, the pixel fonts were often crude in letterform and in spacing, especially when set at sizes other than 9, 10 or 12 points, but served their purpose nevertheless.
Looking for a more elegant solution, Apple developed the TrueType font format and launched it in 1991. With TrueType, there was no need for separate printer and screen versions, there was only an outline font and the computer generated the screen font on the fly by rendering the screen font from the outline description.TrueType was introduced in Microsoft Windows 3.1 in 1992 but suffered from the fact that Windows, at that time, ran in 16-bits with fairly slow processors and couldn't render fonts smoothly. It wasn't until Windows 95 arrived that the full potential of TrueType was realised.
Considering that screen resolution was still considerably lower than that used for printing, a better way of simulating print resolution on the screen was developed. Font smoothing, or anti-aliasing, helped give the impression that the viewer was seeing a printed page on the screen. It worked by rendering the outline printer font in multiple shades of the font colour against the background 'page' colour. Where the type's edges met the paper, they were blended into the background colour with a range of intermediate tones. At larger type sizes, this works very well but when the type's stroke (thickness) is only one or two pixels wide, the whole character is 'blended' giving a fuzzy, uneven appearance. Anti-aliasing is detrimental to the look and readability of type at small font sizes. Being small is bad enough, but making it blurred too only makes thingsworse.
