Articles

Graphic fonts versus browser fonts

When we make a design prototype, there can be some understandable confusion about font choices and options.  This article will explain the distinctions between graphic fonts and browser-generated fonts. 

Graphic fonts

Graphic fonts are created in Photoshop or another graphic-editing program. This method has almost no limitations.  The main advantage: most anything that can be created in Photoshop can be displayed on a web site.  Any font can be used, with any style, from elegant (the first line) to chunky and cartoonish (the last line).  This method is usually used for page headers. 

Examples:

The main disadvantage: if a web site needs fifteen headers, they all must be created in Photoshop, saved as GIFs, and inserted in to a web site.  And of course, if a page title changes, or a new header is needed, a designer must create and update the appropriate header. Therefore, it is best to limit the use of headers to pages or sections that are relatively static.

Browser-generated fonts 

The line you are reading right now is created by your web browser (this still applies if you are viewing this page with an iPhone or other user agent).  The main advantage to this is automation. That is, if your site is built in any sort of Content Management System (CMS), page headers, subheaders, and other information can be created dynamically.  For example, if you have a site with five pages and add a sixth page, the page's main header, for example:

Company History

will be generated automatically based on the name of that new page.  There is no need to use Photoshop to make a new header.  Also, if you change "Company History" to "Our History", the header will update automatically, you don't need to do anything further.

The disadvantage to browser-generated text is that font choices are very limited.  Across different operatings systems, i.e., Windows 2000, Windows XP, Windows Vista, Mac OSX, and Linux, a designer can count on few fonts to be both universally available and also readable.  Some fonts, like Comic Sans, are widely available, but not terribly professional in appearance.

The "short list" of usable browser fonts includes:

• Courier/Courier New
• Times New Roman
• Georgia
• Tahoma
• Arial
• Verdana

We prefer Verdana, primarly, due to its readability on screen.  Some fonts look great on paper, but lousy on screen.  This is in part because printed material can have a much higher resolution, or dots-per-inch, than a screen.  Other fonts look fine on screen, but don't fit the material being presented.  For example, Courier and Courier New look a lot like they came from a typewriter.  This is fine if you're going for a retro look, but probably not appropriate for selling upscale clothing or watches.

Some designers will specify fonts that are not available across different machines.  When text looks great on one computer and just passable on another, this is often because the latter computer does not have the specified fonts installed.  Consider the example below.  The first font, Freehand471 BT, is stylish and smooth. The second is Verdana.  There's nothing wrong with Verdana, but it's not what the designer intended.

There is a third method for displaying fonts in the browser that combines the advantages of both approaches.  It's called sIFR, or Scalable Inman Flash Replacement.  While the technique is beyond the scope of this article, but you can read more about it here.

For more details about the design process, read Steps in the design process.