Web Design with HTML and CSS

The importance of typography on the web

Lesson 6, Formatting Text with CSS 115

Web-safe fonts

Following is a list of the most reliable fonts for web use:

• Arial


• Verdana


• Georgia


• Times New Roman


• Courier


• Trebuchet


• Lucida


• Tahoma


• Impact
  The list is small because it takes into account both Mac and Windows platforms and assumes
  that there may still be older computer systems that are active and accessing the web. These
  older systems had a more limited font selection than today’s systems, and so a designer needs to
  consider this when choosing fonts.
  The above list is also limited for stylistic reasons. Both Courier and Impact, for example, are
  used infrequently because although they are widely available, their distinctive styles limit their
  everyday use.

One of the solutions to the lack of fonts on the web is to use a font stack. In CSS, a font stack
is a list of multiple fonts that the web browser uses in an attempt to display text onscreen.
The following CSS code shows an example of a font stack:

font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;

In this example, the browser fi rst looks for the Helvetica Neue font on the user’s system.
Notice the quotation marks in this example. In most cases when specifying a font, quotation
marks are unnecessary, but in some cases, the quotation marks are needed to help the user’s
computer choose the right version of the font. If the user doesn’t have Helvetica Neue,
then the browser looks for the more generic version of Helvetica. If Helvetica is absent, the
browser uses Arial, which is a font that is extremely similar to Helvetica. If for some reason
Arial is not on the system, the last choice is sans-serif, which allows the system to use any
sans-serif font it can fi nd on the system. Sans-serif is the generic defi nition for all fonts that
do not have small strokes (called serifs) at the end of each character. Examples of serif fonts
are Times New Roman and Georgia.