Screen Typography

Screen Typography

Buddy Sean asked me about choosing fonts for software development. “What is a good legible font for software? Where do you find out more information about this? Is there a developer kit you can buy or download?”

When it comes to software font use, you should look for fonts that are designed for the screen. They are heavily “hinted” to display well at various common sizes like 9pt through 14pt. An ordinary font purchased for print work will not look consistently good at small size in a GUI application. You want either a bitmapped screen font (somewhat rare these days), or a “new media” font designed for screen use in TrueType or OpenType format. Bitstream has an example of the difference.

Now you have two options:

Option 1. Use What’s Already Installed

If you’re designing for Windows software development, you can rely on the built-in high-quality screen fonts such as Arial, Tahoma, Georgia, Trebuchet MS, Verdana, Courier New, and Times New Roman. Not all of them are installed depending on your version of Windows, so you may have to track down the original vendors. You can double-click the font list in the Windows Fonts Control Panel…Arial, for example, is licensed from AgfaMonotype.

The Microsoft Typography site has a listing of what fonts are included with what Microsoft products.

If you’re designing for both Macintosh and Windows, many of the fonts above are already installed because Microsoft Internet Explorer for Mac has been installed by default in Mac OS 9 through Mac OS 10.3. For advanced users who have chosen not to install Internet Explorer, those fonts may not be available. It’s also possible that Internet Explorer will go away from future versions of the Mac OS.

Option 2. License Fonts and Include with your Installer

You also have the option of licensing fonts for your applications, and including them as part of the install. I’ve not gone this route personally, but there are developer resources at AgfaMonotype. …check out the ISV (Independent Software Developer) fonts. Another competitor is Bitstream, which offers similar solutions for developers.

Miscellania

If you’re designing for internationalization, you need to look a little deeper into which fonts offer unicode support. This is the kind of thing that a developer needs to go after… in general, you’ll lose typographic control because your options are limited in the other languages. Internationalization is a whole ‘nother ball of wax.

I’m curious whether fonts optimized for Flash, are also suitable for general application development. A lot of these are designed to be precise at 5 to 12 pixels in height, which is really small on a modern screen. They might be OK for labeling, applications that “look cool” like games, or devices that run at 800×600 or smaller. Legibility would be difficult at higher resolutions.

There are also old font formats that are completely converted for screen use at a specific size…Mac users may remember “screen fonts”. It’s been a long time since I’ve seen any, but I know applications like Photoshop and specialized software like terminal emulators use them.

If you want to get extra fancy, there’s a technology called Saffron you can license from Mitsubishi, that promises excellent legibility without a lot of hinting and kerning BS. The next version of Flash Player (version 8) apparently uses this. This is a more specialized application though, than your typical windows app. Would be interesting for games or bitmapped screen devices.

1 Comment

  1. Karen Breen-Bondie 16 years ago

    David,
    I have searched in vain to a screen font problem I am having and thought I could turn to you since your blog posting about that subject.

    Default screen font for Wikipedia and Google Map labels is Binner.  It is such a hard font to read. I wasn’t always this way, but I don’t know what happened and I don’t know what font is missing to otherwise change it back.  I’m guessing that the original (default) screen font was Arial but I have that in my library.  I can send you some screen shots if it would help to identify what’s going on.