Back2Front Web Site Management
Header Splash
Back2Front - The Website Management People
Back2Front - The Website Management People
Introduction
What We Do
How Much?
Our Clients
Learn MoreLearn More
Get Started
Contact Us

Fonts for Web Sites

Unlike documents fit for print, web sites cannot be formatted with complete rigidity. Web site authors have no control over the kind of device or software that is used by the public to view the websites they create. For example: Apple computers, PCs, BlackBerry devices or internet-capable cell phones are all viable options for the user, and each device may render a web page differently. To complicate matters, numerous internet browsers (software used to view documents coded in HTML) exist for use with any internet-capable device, such as Microsoft's Internet Explorer, Netscape's Communicator, or Opera. All of these browsers interpret the standard HTML specification in a unique way. As a result, web designers are faced with the necessity of creating documents that are specified more approximately than they would like.

Nowhere is this principle more clearly observed than in the selection of fonts a web designer may choose for a web site. A web designer may prefer to use a font called "Architect" (a very fine-lined, sans-serif font); however, if the device used to read the web site does not have the "Architect" font installed, another font will be substituted. In fact, most people's computers contain only the default fonts that came with the original software installed. For example, here is a listing of the default fonts that are installed with a few popular operating systems:

Microsoft Windows 2000
Standard Fonts
Microsoft Windows NT
Standard Fonts
Microsoft Windows XP
Standard Fonts
Arial
Arial Black
Arial Bold
Arial Bold Italic
Arial Italic
Comic Sans MS
Comic Sans MS Bold
Courier 10,12,15
Courier New
Courier New Bold 
Courier New Bold Italic 
Courier New Italic
Georgia
Georgia Bold
Georgia Bold Italic
Georgia Italic
Impact
Lucida Console 
Lucida Sans Unicode
Microsoft Sans Serif
Modern
MS Sans Serif 8,10,12,14,18,24
MS Serif 8,10,12,14,18,24
Palatino Linotype
Palatino Linotype Bold
Palatino Linotype Bold Italic
Palatino Linotype Italic
Roman
Script
Small Fonts
Symbol
Symbol 8,10,12,14,18,24
Tahoma
Tahoma Bold
Times New Roman
Times New Roman Bold
Times New Roman Bold Italic
Times New Roman Italic
Trebuchet MS
Trebuchet MS Bold
Trebuchet MS Bold Italic
Trebuchet MS Italic
Verdana
Verdana Bold
Verdana Bold Italic
Verdana Italic
Webdings
WingDings
Arial
Arial Bold
Arial Bold Italic
Arial Italic
Courier 10,12,15
Courier New
Courier New Bold
Courier New Bold Italic
Courier New Italic
Lucida Console
Modern
MS Sans Serif 8,10,12,14,18,24
MS Serif 8,10,12,14,18,24
Roman
Script
Small Fonts
Symbol
Symbol 8,10,12,14,18,24
Times New Roman
Times New Roman Bold
Times New Roman Bold Italic
Times New Roman Italic
WingDings
Arial
Arial Black 
Arial Bold 
Arial Bold Italic 
Arial Italic 
Comic Sans MS 
Comic Sans MS Bold Courier 10,12,15 
Courier New 
Courier New Bold
Courier New Bold Italic 
Courier New Italic 
Estrangelo Edessa 
Franklin Gothic Medium 
Franklin Gothic Medium 
Italic 
Gautami 
Georgia 
Georgia Bold 
Georgia Bold Italic 
Georgia Italic Impact 
Latha 
Lucida Console 
Lucida Sans Unicode 
Microsoft Sans Serif 
Modern MS Sans Serif 8,10,12,14,18,24 
MS Serif 8,10,12,14,18,24 
Mv Boli 
Palatino Linotype 
Palatino Linotype Bold 
Palatino Linotype Bold Italic 
Palatino Linotype Italic 
Roman 
Script 
Small Fonts 
Symbol 
Symbol 8,10,12,14,18,24 
Tahoma 
Tahoma Bold 
Times New Roman 
Times New Roman Bold 
Times New Roman Bold Italic 
Times New Roman Italic 
Trebuchet MS 
Trebuchet MS Bold 
Trebuchet MS Bold Italic 
Trebuchet MS Italic 
Tunga 
Verdana 
Verdana Bold 
Verdana Bold Italic Verdana Italic 
Webdings 
WingDings 
WST_Czech 
WST_Engl 
WST_Fren 
WST_Germ 
WST_Ital 
WST_Span 
WST_Swed 

Looking at the above font listing, we can assume that our "Architect" font is not installed on most people's computers. If only the "Architect" font was specified, when a web site was designed, then what the web site would look like to a user who doesn't have this font installed - is anybody's guess!

In order to have some amount of control over how a web site is going to look, designers must choose fonts common to most installations.

These days, most competent web designers use "style sheets" to specify which font(s) are used on a web site they create. Luckily, we can specify several fonts in a style sheet - like this:

font-family:       Arial, Helvetica, Verdana, sans-serif;

The style sheet code above enables this functionality for a web site: if the first font specified (Arial) is not available, the second font (Helvetica) will be used; if that font is not available, Verdana will be used; failing that, the default (sans-serif) font that is installed on the machine will be used. In this way the designer can create a site that "fails gracefully" (in other words, it may not look exactly as intended but at least it will be close - or at the very least, legible).

To use uncommon fonts successfully (for branding purposes, for example) web designers can use an image of text in place of normal HTML text. This works well for things like a company logo and/or tagline - but there are also some drawbacks to this practice:

  1. An image of a piece of text will take much longer to load than that same text rendered in HTML. This can be a big problem with slow internet connections.
  2. Search engines cannot see the text that is inside of an image, and therefore cannot use text displayed this way to index or rank a web site.
  3. Images take much longer for a web master to create than simple HTML text, implying a higher cost associated with updating a site with text in images.
At Back2Front, we take all of the above into account as we create and maintain a web site. We always strive to find the best compromise between utilizing the fonts our clients prefer while keeping the web site functional for all visitors. We do this by:
  1. Taking full advantage of style sheets to specify cascading alternate fonts, thereby controlling the display of text as best we can.
  2. Restricting the use of images used to display text to specific places within the web site, ensuring the most visual impact and the least negative consequence to functionality.
  3. Cross-testing the web site on several different systems, verifying that it can be viewed by most users acceptably.
It is important to remember that the web is not a print medium. There are advantages and disadvantages to this fact. To get the best result, exploit the advantages (such as anytime content changes), and make sure to accommodate for the disadvantages (lack of precise control over fonts for example).