42 Chapter 3 – Web Design Principles for Print DesignersTypography on the Web
Web Design in a Nutshell, eMatter Editionyour browser’s preferences and you will find that you (and every other surfer) are
able to specify the fonts and sizes that you prefer for online viewing.
For anyone accustomed to designing for other media, this loss of font control is
cause for major frustration. From the time they discovered the Web, designers (and
their corporate clients) have been pushing for ways to control typography in order
to produce attractive and predictable web sites.
Great strides have been made in this effort since the early days of the Web and
HTML 1.0; however, as of this writing, the font issue is still unfolding. This section
discusses possible strategies and technologies (along with their advantages and
disadvantages) for designing type in web documents. It also addresses the issue of
using foreign (non-western) characters on web pages.You Have Two Fonts
About the only thing you can be sure of when you’re designing web pages with
basic HTML is that you have two fonts to work with: a proportional font, and a
fixed-width font. The problem is that you don’t know specifically which ones or at
what size they will be displayed.Proportional fontAproportional font(called “Variable Width Font” in Netscape Navigator) is one
that allots different amounts of space to each character, based on its design. For
instance, in a proportional font, a capital “W” takes up more horizontal space on
the line than a lowercase “i.” Times, Helvetica, and Arial are examples of propor-
tional fonts.
Web browsers use a proportional font for the majority of text in the web page,
including body text, headings, lists, blockquotes, etc. In general, proportional fonts
are easier to read for large bodies of text.
Because the majority of users do not take the time to change the default font in
their browser preferences, you can make averybroad assumption that most of the
text on your page will be displayed in 10 or 12 point Times (Netscape default) or
Helvetica (the default in Microsoft Internet Explorer). Remember, this is only a
very general guideline.Fixed-width fontFixed-width fonts (also known as “constant-width” or “monospace” fonts) are
designed to allot the same amount of horizontal space to all characters in the font.
A capital “W” takes up no more space than a lowercase “i.” Examples of fixed-
width fonts are Courier and Monaco.
Web browsers will use the fixed-width font to render any type within the
following HTML tags:
Preformatted text
- Typewriter text
Code