Home > Articles

This chapter is from the book

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.2Figure 3.2 Fonts are grouped in categories with similar characteristics (as in serif fonts) or usage (decorative fonts).

Table 3.2 Common Fonts

Font Category

Common Windows Fonts

Common Mac Fonts

Additional Fonts

Serif— fonts with serifs, extra strokes at the points of the letters

Times New Roman, Garamond

Times, Palatino

Century Schoolbook, Goudy Old Style, Caslon, Footlight MT, Georgia

Sans Serif—fonts without serifs

Arial, Verdana

Helvetica, Geneva

Trebuchet MS, Franklin Gothic, Eras

Monospace (or Fixed Font)

Courier New

Monaco

Lucida Sans Typewriter, Ocra-A BT, TaxType Mono

Script

Lucida Handwriting Italic

 

Riverside, Lucia BT, Hancock, Vladimir Script

Decorative

Impact

 

Dragonwick, Bergell, Hansa

Symbol

Symbol, Wingdings

Symbol

Dingbats, Monotype Sorts, People, Puzzle


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.

NOTE

Even the common fonts for each machine can vary. Each version of Windows ships with more fonts than the previous version. Mac OS X comes with many of the common Windows fonts as well as the Mac standards. Many fonts are also installed with such applications as Microsoft Office and Adobe Photoshop.

→ 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).

NOTE

Although the font element has been deprecated, font tags are still in such widespread use that they are covered in this chapter in detail. This shouldn't be interpreted as a recommendation of their use, however. CSS provides for much greater control over font presentation and is more easily modified on a page-wide or site-wide scale.

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

Table 3.3 font Attributes

Attribute

Purpose

size

Sets the relative size of the text

color

Sets the color of the text

face

Sets the font face or font group for the text

class

Sets the class ID for the text, enabling you to apply a style from a style sheet

dir

Controls the text direction, either left-to-right or right-to-left

title

Gives the block of text a title (similar to alt text for an image)

style

Defines in-line style rules


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.4Figure 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.

NOTE

Even if you selected text before editing the font list, the new font group is not applied to that text until you select it in the Font Type drop-down list in the Property inspector.

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

  1. 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).

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

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

  4. 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.

TIP

Choosing specific size settings gives you more control as a designer, but it gives less control to the user. Choosing relative size settings reverses this control. It's up to you as the designer to apply size settings in a manner that balances your need to control design with the user's need to control readability.

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.6Figure 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.

  1. 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.7Figure 3.7 Using the color picker to set the font color is a quick, visual way to colorize your fonts.

TIP

To return text to the default text color, click the Color Picker and then click the white square with the red strikethrough button.

→ 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.

CAUTION

Remember, if you underline text on your pages, it can be confused with a link.

Table 3.4 Font Faces and Their Uses

Font Style

HTML Element

Used For

Bold

b

Adding bold emphasis

Italic

i

Adding emphasis using italicization

Underline

u

Adding emphasis using underline

Strikethrough

s or strikethrough

Editorial purposes

Teletype

tt

Monospaced font

Emphasis

em

Usually displayed as italics

Strong

strong

Stronger emphasis than just using the emphasis style, usually displays as bold

Code

code

Text that represents a computer program listing

Variable

var

Text that represents a program variable

Sample

samp

Text that represents sample output from a program

Keyboard

kbd

Text that represents user input

Citation

cite

Source of a quote

Definition

dfn

Text that is a definition


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

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020