Formatting Text with HTML

This chapter is from the book

Special Edition Using Macromedia Dreamweaver MX

Learn More Buy

This chapter is from the book

This chapter is from the book 

Special Edition Using Macromedia Dreamweaver MX

Learn More Buy

Working with Fonts

As you know, text is presented both online and offline using fonts. Fonts range from the plain to the elaborate, and from the highly readable to the highly illegible (see Figure 3.2). Fonts are grouped into categories, families, and faces. Font categories are the master families of type and describe the decoration or common features that denote families of fonts. Font families can be further broken down into font faces, which are specific font names. A font can also take on font styles, such as bold, italic, narrow, or regular/normal. The font categories and some of their faces are listed in Table 3.2.

Figure 3.2 Fonts are grouped in categories with similar characteristics (as in serif fonts) or usage (decorative fonts).

Table 3.2 Common Fonts

Of course, most of the fonts you see on the Web fall into either the serif or sans serif categories. That's because they're the most readable onscreen. As seen in Table 3.2, they're also the most common of all the preinstalled fonts on both major computer platforms. Monospaced fonts are generally used to signify a code listing or occasionally to integrate the text with a specific site design. Script and decorative fonts can be extremely difficult to read online and are generally not found on a broad range of users' computers, so they are usually used only in headings or the site logo. When used in this manner, they are created in a graphics package and inserted as images to bypass the font selection restraints and give the designer more control over appearance.

→ To read more about using images to replace text headings and similar elements, see "Adding the Image," p. 68.

The font Element

Fonts are controlled in two ways. The font element is an inline method of setting fonts and attributes for a block of text. The font element's tags are automatically used by Dreamweaver when you use the Property inspector to modify text attributes such as font face, size, and color. Because it's so easy to use, many developers still use the font element.

Interestingly, however, the font element is deprecated by the W3C for HTML and is not to be used at all in any strict HTML or XHTML document. Instead, Cascading Style Sheets (CSS) should be used to define the form of your text, leaving the HTML document to contain only the content itself.

→ Cascading Style Sheets are covered in detail. See "Using Cascading Style Sheets in Dreamweaver," p. 285.

→ Want to use the font element and still follow best practices? Check out which HTML and XHTML document types allow you to use the font element in "Font Use" in the "Troubleshooting" section at the end of this chapter.

The <font> tag allows for several attributes, the most common of which are accessible from the Property inspector (see Figure 3.3 and Table 3.2).

Figure 3.3 The Property inspector puts the most common <font> attributes within easy reach.

Table 3.3 font Attributes

Setting the Font Face

The first roadblock in formatting your text is usually font choice. You can design a site that looks absolutely beautiful in Formal 436 BT font, but if users don't have that on their machines, the text reverts to the default font setting for their browsers. There's a big difference between Formal 436 BT and Times New Roman in both appearance and spacing. Thus, not only will the text look different than what you intended, but the layout of your page can also be set askew.

Fortunately, you can group fonts in attribute values and Cascading Style Sheet definitions. This is why it's important to understand which fonts belong to each category. Rather than choosing one nonstandard font and taking your chances on display, you can specify a range of fonts (usually in the same font category), such as trebuchet ms, arial, helvetica, sans serif. In this case, the browser first looks to display the text in Trebuchet MS. If that font is unavailable on the user's machine, it moves on to the next font in the list, and so on, until it finds a match. Usually, the final choice in a font group is a generic font category. Although you do lose some control over the specific presentation of your text when grouping fonts, you can be reasonably certain everyone has at least one sans serif font on their machine. Adding the font category to your font group ensures that text intended for sans serif Trebuchet MS isn't viewed in serif Times New Roman.

In Dreamweaver, fonts are chosen from one of the defined font groups. Select a range of text, and then select a font group from the Font Type drop-down menu in the Property inspector (see Figure 3.4).

Figure 3.4 The Font Type list contains preset font groups for the most commonly used Web fonts, along with any groups you add.

Adding Font Groups

You can add your own font combinations to the Font Type list. If you consistently use Trebuchet MS on your pages—either alone or in combination with other sans serif fonts—you can save time by adding it to the font list. To do this, perform the following steps:

1. Select Edit Font List from the bottom of the Font Type drop-down menu. This option is also available using the Text, Font, Edit Font List menu option.

2. In the Edit Font List dialog box, you can add or remove a font from an existing group by selecting that group from the Font List (see Figure 3.5). Otherwise, scroll to the bottom of the Font List to select Add Fonts in List Below.

Figure 3.5 The Edit Font List dialog box lists all the fonts available on your computer to create and modify font groups.

3. To add a font, select it from the Available Fonts list. This list contains all the fonts installed on your computer, along with general font categories (found at the bottom of the list).

4. Click the arrows pointing to the Chosen Fonts list.

5. Continue steps 3 and 4 until the font group contains all the fonts or categories you require.

6. Click OK to add the new font group to the list and exit the dialog box.

Deleting Font Groups

You can also delete fonts and font groups. To delete a font from a group, do the following:

1. Select a font group from the Font List in the Edit Font List dialog box.

2. In the Chosen Fonts list, select the font you want to remove from the font group.

3. Use the arrows pointing away from the Chosen Fonts list to remove the selected font from the group.

4. Click OK.

To completely remove a font group, select the group in the Edit Font List dialog box and then click the minus (–) button at the top of the Font List.

Setting the Font Size

HTML font sizes are relative rather than a specific point size (unless you're using CSS, which gives you greater control over font size). When you select 3 or Default in the Property inspector, in theory, your site's visitors will see your text in the default size they've set for their browsers. Sizes 4–7 appear larger than the default, whereas sizes 1 and 2 are smaller.

When choosing a font size, keep in mind that browser differences exist between Windows and the Mac. The standard resolution for text on a Mac is 72dpi, whereas the standard is 96dpi for Windows. This means that text formatted to look good on a Mac might look too large on a Windows machine. If your site is also being read on the ever-increasing number of Web-enabled PDAs and cell phones, this issue is further compounded.

Another issue is browser settings. If a user has his browser set to display fonts in a large size and you pick a large size for your fonts, the output on the end user's screen can be enormous. The opposite is equally true; many Web surfers set their default text size to "smaller" to fit more text on the screen. When they visit a page coded to use small fonts, the text is too small to be legible. While savvy Web users know to increase their default text sizes in these instances, not all users will go to the trouble.

This problem is particularly of concern for those individuals who are visually impaired. Using relative font sizing (discussed in just a bit) can help. Even better, using style sheets, which have specific options to allow for resizing of fonts, is the best bet for providing site visitors with control over the size of text they're reading.

To set the font size, do the following:

1. Select the text to be sized. If no text is selected, the size change will be applied to subsequent text.

2. In the Property inspector, click the Size drop-down list (see Figure 3.6).

Figure 3.6 In the Size drop-down list, you can select from a specific size or an increased or decreased size relative to the default.

3. Select a size from the list.

As you can see from the list, you can pick a specific HTML size of 1–7, or you can choose to increase or decrease the size relatively from the default size by using the –7 through the +7 options. If a user's default size is 3, selecting +2 makes the font size a 5. If a different user's default size is 5, the same text would appear to that user as a size 7.

Setting the Font Color

The default text color is set in the Page Properties dialog box. Unless you modified the page properties, the default color for text is black (#000000). To change the color of text from the default, select the text and then use the Color Picker in the Property inspector to select a new color (see Figure 3.7). The Text Color field uses the same Dreamweaver color picker as the Page Properties and other color tools. Alternatively, you can type the hexadecimal code in the text box to the right of the Color Picker.

Figure 3.7 Using the color picker to set the font color is a quick, visual way to colorize your fonts.

→ For more on the process for changing the default text color using the Page Properties settings, see "Adding Text Color," p. 34.

Setting Font Styles

A font style is formatting such as bold or italics applied to a font. The most typical font styles were seen in Figure 3.3 and can be applied from the Property inspector.

You can choose additional font styles by selecting Text, Style from the menu (see Table 3.4). You can also choose more than one style for the same text selection, such as when creating bold, italicized text.

Table 3.4 Font Faces and Their Uses

If you select a style before typing, the style is applied to all subsequent text.