This chapter is from the book

This chapter is from the book

Working with Font Styles

Font stacks determine which fonts a browser displays on your webpage. A browser uses the first font in the stack that is installed on the user’s system. If none of the fonts in the stack are installed, the browser displays the text as specified by the user’s browser preferences.

In Dreamweaver, all font control is provided via CSS, and you access it through the CSS tab of the Property inspector . There, you’ll find controls for the font family, the font style, the font weight, the font size, and the font color. These controls have changed somewhat in Dreamweaver CC. The two main changes are in the font family pop-up menu and the addition of the font weight pop-up menu. The Font pop-up menu now includes an entirely new set of font stacks (which previous versions of Dreamweaver called font groups) that Adobe says is more up to date in including standard fonts installed in Windows, OS X, and Linux. Font weight is specified in a range of 100 through 900 and specifies the heaviness of the font; Adobe has created a table of common font names and their numeric weight equivalents, which is reproduced in Table 4.4.

You’ll find Dreamweaver’s font styling controls in the CSS tab of the Property inspector. We’ve labeled this figure with each of the CSS properties and their controls.

Table 4.4. Font Names and Numeric Equivalents

Font Name

Numeric Equivalent

Thin, Hairline

100

Extra Light

200

Light

300

Normal, Book

400

Medium

500

Semibold, Demibold

600

Heavy, Extra Bold

700

Black

900

To apply font styling

In Design view, select the text to which you want to apply the font stack.

In the CSS tab of the Property inspector, choose the font stack you want from the Font pop-up menu .

The text will change to take on the appearance of the first font in the font stack that is installed on your system.

Make changes as needed to the font style, weight, size, and color values. Note that the font size unit values pop-up menu becomes active only if you first change the default value for font size.

TIP

Dreamweaver defines font stacks using the font-family CSS property and applies the font styling using in-line CSS styles, which you can later move to an external style sheet. You’ll learn more about CSS starting in Chapter 7, and more about moving internal CSS styles to external CSS styles in Chapter 9.

TIP

It’s often easier to define one or more styles once, name them, and then simply apply those styles to text. Again, because this uses CSS, you’ll learn how to do that in Chapter 7.

Fonts, Browsers, and Operating Systems

Not all computers have the same fonts. For example, a common sans serif font on Windows systems is Arial. A similar sans serif font on Macintosh systems is Helvetica. Many Linux systems have Helvetica, but not all.

But don’t assume that you can make generalizations just based on operating system; different versions of operating systems can come with different fonts. And on top of that, different browsers (even on the same operating system) can ship with different defaults for serif and sans serif fonts. All these systems have some default fonts, however.

When choosing font stacks, select fonts that share similar characteristics and try to cover all the bases in terms of operating systems. Then, add either the generic serif or sans serif choice at the end, just in case none of your preferred choices are available. Why add a font you don’t even have to your font stack? One reason is that you expect a lot of your viewers to have a particular font (even though you don’t have it). For example, if you are developing pages for a corporate client for use in its intranet, your client may ask for a particular font that is installed on all of the company’s machines. Or you might have a font stack that includes web fonts, which we discuss in the next task.