Website Design  «Prev  Next»
Lesson 6 Choosing and using font-type for the Web
Objective Describe the principles for using type effectively on the Web.

Choosing type for the Web

There are several issues to address in Web typography, including cross-platform consistency, download times and readability.

Standard Web fonts

The HTML language is used to define the placement and style of all text or objects within a web page. One of those styles is the choice of text. When your browser receives a Web page document, it reads the font selection code and displays that font accordingly. However, due to the limitations of HTML, only 'resident' font styles will be displayed on the visitor's screen. Resident fonts are those fonts presently available on the visitor's PC (in Windows, the available font is defined by the default printer).

Why use a standard?

When a Web site utilizes a font style not available on the visitor's PC, the HTML language will 'pick' the next 'closest' style. Unfortunately, the choice is often difficult to predict and can result in poorly chosen substitutes as a result. The lesson for the global developer is to utilize only the most commonly available font styles for your web pages: Courier, Times Roman, Script, and Arial. Otherwise, your finely matched styles could ultimately be displayed with some fairly garish results.
Most Web page authoring programs such as Dreamweaver or FrontPage encourage use of these standard fonts by listing them first in the menu for font style selection.

Learning Web Design

Cross-platform consistency

The Mac system and the Windows system offer some differences in their default fonts. Unfortunately, a number of the system fonts do not have equivalent fonts across platforms. Therefore a Web page that specifies a standard font in the HTML font tag may look different on different systems. Additionally, type size varies from Mac to PC.
When designing Web pages its important to be sensitive to the different capabilities of the browsers utilized by your potential visitors. While HTML is a cross-platform compatible standard, proprietary HTML code is available which may not be compatible to all versions of the world's two most commonly used browsers: Internet Explorer and Netscape. Let's talk about a few of the most common compatibility issues.

Gaining style control

Cascading Style Sheets (CSS) offer increased control over the appearance and position of Web pages. CSS was developed by Microsoft to facilitate rapid layout of new web pages. It is essentially a template method for specifying common layout and font specifications. Unfortunately, CCS is not recognized by all versions of Netscape, resulting in jumbled pages or missing elements.
One work-around to this problem is to develop your page layout in tables. Tables are compatible with Netscape and IE (after version #2) and are the preferred method for cross-browser compatibility.

Displaying special fonts

Another work-around deals with font styles beyond the standards, including any custom fonts that may have been developed for your client's branding purposes. As discussed, using uncommon typefaces can result in unpredictable font display due to HTML's automatic substitution for non-resident font styles. The solution is to display the text or paragraph as a picture. This process is called Graphical Typography.
The following are some disadvantages to using Graphical Typography:
  1. Pictures use more bandwidth than text, so the web page loads more slowly.
  2. The text displayed as images is not searchable.
Question: How does a browser know what font to use in displaying a particular web page?
Answer: The font choice is specified in the code of the web page document. If it is a custom font, the text is probably saved as graphical files, or "pictures" of the text in the custom font


Sometimes the need for readability conflicts with a designer's aesthetic intentions. For example, some visual designers like smaller font sizes that leave more white space or more room for graphics. This approach can reduce readability, however.
Anti-aliasing is one technique that can aid the readability of a font style.

Production decisions

In the face of cross-platform and readability constraints, determining how to choose layout type for the Web requires choosing among several possible strategies. Your decisions will need to take into consideration the advantages and disadvantages of such approaches as graphical typography vs. using standard fonts. In the next lesson, you will learn about the types of software that are used for development for the Web.

Signs Metaphors Strategies - Quiz

Click the Quiz link below to check your understanding of strategies that are used in creating signs and metaphors.
Signs Metaphors Strategies - Quiz