HTML Typography

Two Basic Concepts

1: All web typography is relative, with the browser and the local computer substituting available fonts, font sizes, resolution and line widths.

2: Web output is essentially low-resolution, which requires extra caution for legibility considerations such as italicization and foreground-background color relationships.

Cascading Style Sheets (CSS)

A hierarchy of style sheets which can be defined on many levels and travel with the web page. CSS are accepted by most recent browser versions. CSS style sheets are defined in an HTML document using <link> and <style> commands. CSS provides a simple method of providing text style properties, such as alignment, font, treatment and color. CSS provides the browser/computer with choices for fonts, such as “Verdana, Arial, Helvetica, sans-serif” as the options for sans serif. The “sans serif” command will instruct the local computer to use its default sans serif face if the first three are not available – hopefully.

Type specifications

Fonts are computer specific. Be careful. The font you specify may well not be available on the operating system of the computer displaying your page. The most common faces, such as Ariel and Times Roman, should be available on most computers. Less common, more “designer” faces, such as Mistral for signatures, will display as the default on many computers. Choices, such as the sans serif example above, should display on most computers. But you never know, and you can’t control font all font displays.

Web typography does not necessarily follow the same standards as print legibility. For example, sans serifs may be more legible than romans because of the poor resolution, and slightly expanded sans serifs, such as Verdana, may be more legible than the best print faces, such as Ariel and Helvetica.

Font Sizes:

All font sizes are relative to the resolution and screen size of the displaying computer. There is no such thing as a 10 or 12 point type on the web; the best you can do is specify the relative sizes of type: one type face will be larger or smaller than another. For example, HTML reads point sizes in numbers, with the   numbers approximating the following sizes. But, the most you can be sure of is that 2 is relatively larger than 1 and smaller than 3.

1 = 8 point; 2=10; 3=12; 4=14; 5=18; 6=24; and 7=36 point.

You can also specify type increases as plusses (increasing one size with “+1”)

and minuses (decreasing one size with “-1”).

Point sizes can also be indicated in relative percentages: 120% is 20% larger than the previous type.

Font Treatment:

HTML will read bold face <B> and italic <I>. But be careful. Because of the poor resolution of terminal display, bold face may close up and italics generally are harder to read.

Line Width:

Line width is becoming an increasing concern because different screen sizes and resolutions may produce extremely wide lines. There are varying standards in terms of maximum number of characters per line:  the 1.5 x LC alphabet length yields 39, other standards recommend maximums of 45-60 or 45-75. Some of the discussion on web design is on how to limit/control line widths, with one suggestion being using ems as the standard in CSSs.

Font Color:

There is no real control of color on the web. Every computer displays color in its own way. This implies that the designer should be cautious in the subtle use of  all colors, especially type. Although colors can be specified in CSSs, and HTML accepts generic color commands such as <font color=”red”>, you are best advised to use HTML coding (<font color="#FF0000">).

Foreground-Background Contrast:

Because of problematic color control and poor resolution, be very careful of foreground-background contrast. Avoid any close colors. Also, reverses (white text on darker backgrounds) frequently do not display well.

Typography Home Page

Department of Communication, Seton Hall University