Summary: In the process of building a web site, a distinction is often made between text that is displayed by the web browser ("html text") and text that is embedded in a graphical image (typically a .gif or .jpg file).

HTML Text

Although the font to be used for HTML text can be suggested through the use of the FONT tag or a cascading style sheet, the actual font used depends on what the user has installed on their system (and for this reason the font specification for html text is usually restricted to fonts that ship by default with the standard operating systems). Typically the choice boils down to Arial vs. Times although sometimes fonts like Verdana, Georgia, Geneva (Mac), and Helvetica (Mac) are also specified. Other fonts can be specified but they will only show up if the user just happens to have that particular font installed on their computer.

A typical font family entry in a cascading style sheet looks like: FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

This tells the browser to first try Verdana and if that's not available then Arial, then Helvetica (Mac) and then if none of those are available to choose a san-serif font (sans-serif fonts are typically more rounded than serif fonts and don't have as much detailing on them).

This is regular HTML text where the browser has been told to use Times at 12pts (or a comparable serif font if Times isn't available on the user's system).

This is HTML text where it has been suggested that the browser look first for Verdana, then Arial, then Helvetica (typically included for Macintosh compatibility), then a sans-serif font of the browser's choosing. The browser will select the first available font on the user's system from the list.

This is HTML text where it has been suggested that the browser look for Arial, then Helvetica, then a sans-serif font of the browser's choosing. The browser will select the first available font from the list.

HTML text has some advantages:

• it can be found by search engines
• it can be auto-translated into other languages by online translators such as the one provided by www.google.com
• it is typically the only choice for information coming dynamically out of a database (there's no easy to way to make text into a graphic on the server in real-time unless you have something like Macromedia Flash Generator installed on the server)
  it can be maintained by someone with access to a text editor and and ftp program
• it can be controlled by style sheets which make mass changes to the text on a web site straightforward (for example the "heading1" style can easily be modified to make the point size larger in the style sheet and this change will them automatically ripple through the entire site)

HTML Text has some disadvantages:

• limited formatting options vs. Photoshop or a page layout program like InDesign or Quark (for example it's difficult to wrap text smoothly around a circular image using just HTML).
• no anti-aliasing to smooth out text (this is more of an issue when HTML text is used for things like navigation than for the main body content text).

Graphical Text

Using a program like Adobe Photoshop, text can be set inside a graphic. Any font that is available on the designer's computer can be used. The graphic is typically put up on the web site as a .gif or .jpg image.

Graphical text has some advantages:

• wide range of fonts available to create desired look
• end-user doesn't need to have the font the designer chose to use in the graphic
  adds some branding to the web site
  anti-aliasing technology smooths out the type and makes it less jaggy looking
• html text has limited formatting but all sorts of tricks can be done with graphics and text using Photoshop or even a page layout program like Quark.
  commonly used for navigation bars and other types of clickable buttons

Graphical text has some disadvantages:

• html text can be done with a built-in text editor such as notepad or simpletext while graphical text requires an image editor such as Photoshop.
• if the text incorporated into a graphic needs to change, the graphic must be redone
• if a graphic with text needs editing, the person doing the editing will need to have the right font(s) installed and active on their system or a font substitution may occur which could change the look of the text considerably some fonts, especially at smaller sizes with anti-aliasing turned on, can look fuzzed/mushy and can be somewhat hard to read
• not usually a good choice for large blocks of text (such as a press release, for example)
• search engines can't read text inside a graphic
• auto-language-translation programs can't translate text inside a graphic
• graphical images (which typically take a little longer to load than regular html text) can be somewhat modem-unfriendly

TIP
An easy way to tell if something on a web site is an image or text is to try to select the text with the mouse (the same way you would try to select text in a word processor like MS Word). If the text can be selected, then it's HTML text not an image. Images on the other hand have a special (and very useful) menu that appears when the right mouse button is clicked (or the single mouse button is held down for single button mice).