Changing the Font Size

Dreamweaver has a variety of preset font sizes, including numeric values at set intervals ranging from 9 to 36, relative values ranging from xx-small to xx-large, and options for smaller and larger. All these options use CSS to define text size. Using Dreamweaver, you can achieve a great deal of control over the text on your pages through the use of these integrated CSS features. You'll learn about more advanced CSS functionality later in this lesson.

Best Coding Practice: Deprecation of the Font Tag

In HTML 4.01 the font tag (a tag that defines the properties of text) has been deprecatedremoved from the standardalthough it is still supported by browsers at this time. The font tag wraps around text in the following manner, with opening and closing tags:

 <font face="Arial, Helvetica, sans-serif">Yoga Sangha</font> 

Attributes of the font tag offer a bare minimum of control over text appearance, whereas the use of CSS allows Web developers to control text with much greater precision. Dreamweaver recognizes and supports the font tag by providing tools to use them when necessarysuch as when dealing with legacy pages.

Whenever possible, use CSSand avoid using the font tagto create efficient pages that are up to current standards.

Note

There is a dramatic difference between font sizes on a Macintosh and on Windows. Macintosh computers display text approximately 25 percent smaller than the same text on Windows computerstext on a Macintosh computer is three-quarters the size of text on Windows. Users can also change the font size, which might affect your page design. Test and design your pages accordingly, taking these potential variations into account for a flexible Website that will function correctly for the widest possible range of visitors.

Select the paragraph beginning with At Yoga Sangha, we're dedicated… near the top of the page. From the Property inspector's Size menu, choose 12. Leave the measurement unit at the default: pixels.

Tip

You can also set a default text size for the document in the Appearance section of the Page Properties dialog box.

The text size of the paragraph decreases slightly and appears somewhat smaller than the rest of the text on the page that has not yet been formatted with a size. You can type a value into the Size menu or select one of the preset choices.

Every time you choose an attributeor a combination of attributessuch as a size that's used for the first time on your page, Dreamweaver creates a new style that is listed in the Style menu on the Property inspector. All subsequent text that is defined at the same size will use the same style. New styles are created for each unique combination of font face, size, and color formatting. These styles have generic names that are generated automatically in a numeric order: style1, style2, and so on. You can rename an active stylethe one that displays in the Style menu on the Property inspectorby clicking the Style menu and choosing Rename. You can make a style active by placing the cursor within text that uses that style.

If no size is specified for the selected text, None is displayed in the Size menu. Browsers display text that has no size definition at the default size that is equal to the value 14 in the Size menu (although it might vary from browser to browser and/or on user preferences that visitors set within their browsers).

The numeric font size options that are available in the Size menu might be familiar to you because they are similar to the standard sizes that can be found in word-processing programs.

Note

If you want to remove font size settings and switch back to the default setting, first select the text that you want to change in the Property inspector and then choose None from the Style menu or choose Text > CSS Styles > None.

Font Size Comparison: The Font Tag versus CSS

As a Web developer, you might have to work with pages that use the outdated <font> tagfor this reason you should be familiar with the sizes and options. You might need to convert to CSS by removing all instances of the <font> tag and creating CSS styles. You can easily strip the <font> tag from a site using the Find and Replace feature, which you'll learn about in Lesson 17. The following table compares the values that are now available in the Property inspector Size menu to the older <font> tag size options.

Font Tag Sizes	Numeric Values[*]	Relative Values in the Size menu (CSS-based)	Absolute Values in the Size menu (CSS-based)
		9
-2	1	10	xx-small
-1	2	12	x-small / smaller
None (default)	3	14	small
+1	4	18	medium / larger
+2	5	24	large
+3	6		x-large
		36[**]
+4	7		xx-large

^[*] Using the default setting, pixels, in the measurement menu

^[**] This numeric value is slightly larger than x-large (6), and slightly smaller than xx-large (7).

The HTML <font> tag defines text in sizes that are absolute (1 to 7) or relative (+1 to +7 and -1 to 7). Selecting an absolute number (1 is smallest, 7 is largest) sets the size. The default base size for text in a browser is 3. Picking a positive or negative number makes the font size relative to the base size of the font. The base The positive number +1, for example, makes the font size one size larger than the base size. If you choose +3 for the font size, you are effectively changing the size to 6 (3 + 3). The largest size for the font is 7, and the smallest is 1. Any HTML font size larger than 7 displays as 7; for example, if you set the font size to +6, 3 + 6 is larger than 7, but the font still displays only at the 7 size. These are limitations of the HTML <font> tag and do not affect CSS, which is a far more flexible and versatile method for defining text specifications.