Skip to Content

Fonts for the Screen
With screen-based multimedia and the World Wide Web, we are no longer trying to preview a page that is going to be printed at high resolution. Printing is of secondary importance or not important at all.

When the screen is the output device, type needs to be designed specifically for that medium. Type carved into wood or stone, or engraved into metal, is visibly different in character from that destined for print. The medium dictates the design.

It was towards the end of the '80s that I moved from print design into multimedia and found a need for fonts smaller than those provided by Apple or Adobe. At 9 points, Geneva or Monaco look just fine but to keep HyperCard buttons from getting out of proportion to their importance, I needed fonts that were considerably smaller. Some years earlier, I had written a program for designing pixel fonts for games developers so I knew what the constraints were. If you are working with square holes, you don't use round pegs!

Necessity being the Mother of invention, in 1987 I designed the smallest font that was possible. To correctly form a capital letter, at least five pixels vertically are required. Less than that and horizontal strokes run together in a letter 'E', for instance. To stop the bottom of one line of type running into the next, I added an extra pixel top and bottom as leading - and called the font 'Mini 7' - it was seven pixels high. Mini 7 was a Mac bitmap screen font with no printer outline and I used it for multimedia projects for many years.

When I launched my 'Web Page Design for Designers' site in 1996, I used Mini 7 in the logo and had many emails from people asking what that tiny font was, and where they could get it. Being a Mac screen font, it was of no use to Windows users - and anyway, it only had a very basic character set of caps and numbers. The way to make it available to *everybody* was to recreate it as a TrueType font. So I did, and added several more variants - condensed, expanded and all the corresponding bold weights. A few years on, it is now the most ubiquitous pixel font on the Web.

Of course, a TrueType font is essentially a scaleable outline font that can work at any size, but when you want a deliberate 'bitmap' look with every pixel being an identical square, there are certain rules you have to follow. Every square pixel in the font characters has to align exactly with the pixels on the screen. This means that pixel font can't be scaled like printer fonts or some font pixels will distort to fit the screen pixels grid. Pixel fonts can only be set at one 'designed' size - or exact multiples.

With bitmap editing programs like Photoshop and Fireworks, pixel fonts can be set easily. As long as anti-aliasing is switched off and you can work in pixels and not points, you always get crisp, sharp type that looks great at small sizes. Macromedia Flash is another matter.

Add a comment | Read comments