3.4: Working with fonts and font strings

To understand why text is difficult to control on a Web page, consider the following:

The problem is compounded by differences in how browsers using Windows and those using the Macintosh OS display text. Typically, text looks much different on a PC than it does on a Mac because of variations in font files.

Font Strings

On your CSS page, fonts are specified in “font strings” like this one:

           font-family: verdana, helvetica, sans-serif 

The font string tells the user’s computer:

  1. Look first for Verdana and use that font if it is on the computer.
  2. If Verdana is not present, then look for Helvetica and use that if it is there.
  3. If Verdana and Helvetica are not there, then use the browser’s default sans-serif font.

All browsers allow the user to set defaults for serif type, sans-serif type and monospace (typewriter) type. Internet Explorer also allows the computer user to specify a default cursive (handwriting) font and a default “fantasy” font.

Here are three text strings that are reliable and browser-independent:

     font-family: verdana, helvetica, 'sans-serif';
     font-family: georgia, 'times new roman', times, serif;
     font-family: 'courier new', courier, monospace;

Important! Note the following:

Standard Fonts

You don’t know for sure what fonts a visitor has on his or her computer, but you can make a good guess. Windows-based computers and Mac OS computers come with standard font sets. Additionally, Microsoft has adopted a standard font set for its Web applications. For general use, the Microsoft “core fonts for the Web” are probably the most reliable. Here are lists of standard fonts:

Windows 95 Standard Fonts

  • Arial
  • Courier New
  • Marlett
  • Modern
  • Symbol
  • Times New Roman
  • Wingdings

Macintosh Standard Fonts

  • Chicago
  • Courier
  • Geneva
  • Helvetica
  • Monaco
  • New York
  • Palatino
  • Symbol
  • Times
  • Zapf Dingbats

Microsoft “core fonts” for the Web

The Microsoft core fonts for the Web are fonts that come with Internet Explorer, Front Page and other Microsoft Web applications, for Macintosh or Windows. Check to see if your computer has them; it probably does.

  • Andale Mono
  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Webdings
  • Minion Web

Take a look at some of these fonts and compare.

The advantages of using the core fonts are:

Here’s an example of Verdana as 7-point type; it is still readable because it was designed for the computer screen:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.