Planning and Designing a Successful Web Site - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 72

controls the default size of the base font and can change the size at which the text is
displayed in the browser. Specifi c font sizes are fi xed sizes. Using fi xed font sizes enables
the designer to decide exactly how a page will display in a user's browser. Pixels work
well as a unit for defi ning a specifi c font size because the pixel unit is supported by
major browsers. Font style refers to the stylistic attributes that are applied to the font.
Stylistic attributes include bold, italic, and underline.
Selecting Fonts when Designing a Web Site
As you select fonts for a Web site, keep in mind the following strategies:
• Less is more. In general, you should use no more than two fonts in a Web site to give
the site a consistent look. Select one font, one font size, and one font color for the gen-
eral body text (although text links in the body text will be distinguished by a different
color). You can choose a second font, size, and color for headings.
• Convert headings to images. Sometimes headings and logos are actually text that has
been converted to an image in a graphics program. By converting text into an image,
you have greater control over the look of the final site because you can choose a font
that is not in the Dreamweaver font list and might not be found on every computer.
• Consider what you are trying to convey. Fonts create an impression about the
content of the site. Different fonts are associated with specific types of content. For
example, the titles of old horror movies usually appear in a gothic font; therefore, that
font is usually associated with horror movies. Choose fonts that support the concept
and metaphor for your site.
• Consider accessibility. Visually impaired users of the Web site might have a hard
time reading certain fonts or smaller sizes. Review accessibility Web sites such as
www.yourhtmlsource.com/accessibility to find guidelines about fonts and font size.
For the font of the general body text in the NextBest Fest site, Gage decided to use
gray, 14 pixels, and Arial, Helvetica, sans-serif. Gage selected the Arial, Helvetica, sans-
serif group because of its simplicity, which will help give the site a minimalist look. He
used gray text and the default font size because it is easy to read. The logo and head-
ings will be graphics made from text using the CountdownD font and a combination
of the Web site palette colors. Gage selected the CountdownD font, which was used
prevalently on T-shirts and in advertising in the early 1980s, because it supports the site
metaphor. Until the graphics are available, the font group for headings and subheadings
will be Arial, Helvetica, sans-serif.
Although it is not necessary, designers often choose to have links formatted in differ-
ent colors, depending on their state. To make the site more accessible, Gage will indicate
link states with colors that are different in shade to enable users who cannot see differ-
ences in color. In addition, underlines will be used to indicate the link state for links in
the NextBest Fest site. A text link , a hyperlink that has not yet been clicked, will be olive
(a darker color). When the pointer is over the link, the link is in the hover state. In the
hover state, the link will be underlined and blue-green (a lighter shade). An active link , a
text hyperlink that is in the process of being clicked, will be blue-green. A visited link , a
text hyperlink that has been clicked, will be displayed in olive. See Figure 2-11.