Fonts and Font Tools

After you enter some text, you probably want to dress it up by applying a little font formatting.

In addition to changing the font itself (such as Times, Helvetica, Palatino, Garamond, or Courier), you can find tools for applying familiar character treatments, such as bold, italic, text size, and color. Although you have many other options, these are the most common tools in your arsenal of font formatting, and you'll use them often. Buttons for most of these options are conveniently located on the Common and Formatting toolbars.

The Font dialog box contains every tool you need to control your characters. The options in this dialog box contain the options found on the Common and Formatting toolbars, as well as many others for precise control over your characters. To open the Font dialog box, choose Format Font.

Using font tools

You can use font tools in either of the following ways:

• Type a bunch of text, select the text that you want to format, and then turn on the appropriate tool, by either choosing an option in the Font dialog box or clicking a button on the Formatting toolbar.

• Turn on the tool first, type the formatted text, and then turn off the tool when you're done.

You can also use the Format Painter button on the Standard toolbar (choose View Toolbars Standard) to copy formatting from one piece of text and then apply that formatting elsewhere. To do so, follow these steps:

1. Select the text that contains the formatting you want to copy.

2. Click the Format Painter button.

   If you want to apply the formatting to more than one chunk of text, double-click the Format Painter button.

3. Select the text to which you want to apply the formatting.

   If you're applying formatting to more than one chunk of text, repeat this step until you apply the formatting to all desired text. Then click the Format Painter button to deselect the tool when you're finished.

Tip 

To remove all font styles from a selected chunk of text, choose Format Remove Formatting.

Serifs and such

When you start messing around with fonts, sooner or later you run across some strange terms that describe fonts. Here's what they all mean:

Fixed-width: Doles out the same amount of space to every letter, regardless of whether it's skinny, like i and l, or fat, like m and w. These fonts are also called monospacefonts. Courier (or New Courier) is the most common fixed-width font. Use it whenever you want your text to look like it was typed on your grandmother's old Smith Corona manual typewriter. In Web sites, this font is often used to indicate code. (In fact, we use it for that purpose in this book!)

Proportional: Allots more room on a line to fat letters than to their skinny cousins. Books are printed in proportional fonts, and designers now have at their disposal, because of the desktop publishing revolution, a dizzying array of proportional fonts to choose from. Proportional fonts come in two flavors: serif and sans serif.

Serif: The backbone of body text, with little feet and fancy dots (serifs) on the letters that dress them up beyond mere stick figures. The main body text in this book, as in most books, is in a serif font, and typographers (artists who make text formatting their art) say that large blocks of text are more readable in a serif font. Garamond, Georgia, Palatino, Times, and Times New Roman are serif fonts. If your Web site contains more than a few lines of text, consider using a serif font for your main body text.

Sans: Plain-dotted and footless (hence the French sans, which means without). Sans serif fonts are often used for headings, although they can be used to set off certain blocks of text (like this sidebar). Arial and Helvetica are two common sans serif fonts.

Bold, italic, and beyond

Bold and italic text makes up the foundation of the font-formatting team. You pull these formats out like a trusty hammer every time you build a page.

Tip 

Try these shortcuts for turning on bold and italic: Press Ctrl+B to turn on bold; if you have text selected, the bold text effect is applied to it; if no text is selected, any text you type from the cursor's location forward is bold. To turn off bold, press Ctrl+B again. Do the same with italic, but press Ctrl+I.

In addition to the indispensable bold-and-italic team, you have a bunch of other text effects at your disposal, such as subscript, superscript, strikethrough, underline, and small caps. Use these effects sparingly. Having too many text treatments on a Web page detracts from your text's readability.

To apply a font effect, select some text and do one of the following things:

• Click the appropriate button on either the Common or Formatting toolbar.

• Choose Format Font to open the Font dialog box. Choose a style from the Font Style list, or select the check box next to the effect you want (if any). If you're not sure how a particular effect looks, select the check box to see a preview of the effect in the Preview area of the dialog box. When you're done, click OK.

GLANCE AT THE CODE 

Before you get too far along, take a little break and peek at the code that creates text effects. Click Split in the lower-left corner of the editing window, and you now see Code view at the top of the editing window and Design view at the bottom. Because this may be your first look at your page's code, it's a good time to give Split view a spin. Take a look at some font effects and the code that Expression Web uses to make them look that way. We start with bold and italic. In Design view, find some bold text (or make a chunk of text bold). Here's an example, using the sentence "Does a kid exist who does not like ice cream?"

Now look at the code for this sentence:

 <p>Does a kid exist who does not like <strong>ice           cream</strong>?</p> 

Add italic to the words ice cream and look at the code again:

 <p>Does a kid exist who does not like <strong><em>ice           cream</em></strong>?</p> 

The thingies between the angle brackets are HTML tags. The tag <strong> (strong text) turns on bold, and the tag <em> (emphasis) turns on italics. (You also see a set of <p> tags, telling you that the bit of text is a paragraph; we talk about paragraph tags a little later in this chapter.) Notice that the tags turn on the effect with an opening tag (<strong>-anything from here on out is bold) and turn off the effect with a closing tag, indicated by a forward slash (</strong>-bye-bye, bold!). If two effects are applied to the same text chunk-like in our italic-and-bold example-they open and close in a nested manner, like matching bookends within matching bookends. The following HTML code is incorrect because the tags close in the wrong order:

 <strong><em>ice cream</strong></em> 

Now look at the top of the editing window. As you apply font effects, Expression Web adds the tags to the Quick Tag Selector bar, as shown in Figure 3-3. This bar gives you quick access to the HTML tags for a particular element (in this case, a bit of text) without having to go into Code view. We talk more about the Quick Tag Selector bar in Chapter 14.

Figure 3-3: The Quick Tag Selector bar shows the tags for the element selected in Design view.

Expression Web uses the HTML tags <strong></strong> to create bold text and <em></em> for italic. For all other text formatting-for example, underline, font color, subscript, small caps, and font names-Expression Web uses styles, or CSS. CSS code works a little differently from HTML code; we take a look at the code for styles a little later in this chapter.

TECHNICAL STUFF 

You may run across the tags <b> for bold and <i> for italic in older Web sites, and browsers interpret them just fine. But these tags have fallen out of favor by the Web powers that be. We recommend that you stick with <strong> and <em>. If for some reason you're getting <b> and <i> in your code rather than <strong> and <em>, choose Tools Page Editor Options and, on the General tab, select the Use <strong> and <em> When Using Bold and Italic Toolbar Buttons check box.

Changing fonts

Usually, someone who talks about a document's font actually means its type-face, or the style and shape of the characters. The right choice of font helps set the visual tone for your document and makes the text easy to read. Although you can choose any fonts you want for your Web pages, follow good design sense and stick with only a few fonts: one for the main body text and another for headings. Better yet, choose a font family for each of these elements. The reason is explained in the nearby sidebar "Text for the Web: Fonts and font families."

To change the font, follow these steps:

1. Select the chunk of text whose font you want to change.

2. On the Common or Formatting toolbar, choose a font or a font family from the Font list box.

   Or, choose Format Font and, in the Font dialog box that appears, choose a font or font family from the Font list box.

Text for the Web: Fonts and font families

You have probably already used a word processor to write a report or letter, and you may have printed it on your printer. And you probably fiddled around with the fonts to make it look the way you want. When you create a document for print, you get to decide exactly how your text looks on the page. If you select a fancy font, like Matisse, for your headings (and your printer supports it), that's what you get on your hard copy-end of story.

Not so with Web pages. Whether your Matisse headings show up on your visitors' computer screens is beyond your control. Unlike a printed page, your Web page is being viewed by any number of different browsers on any number of different computer monitors. It may even be viewed on a portable device, such as a PDA or mobile phone, and these devices have special Web browsers of their own. Here's what this means for Web page text: For a font (Matisse, for example) to display in a browser, the font has to be installed on the computer or device that's viewing the Web page. If the Web browser doesn't find the font on the visitor's system, it substitutes the default font specified by the browser (usually Times or Times New Roman). You have a couple of ways to gain more control over which fonts get displayed:

• Assign a font family rather than a specific font: A font familylists several fonts in order of preference. For example, this font family (Matisse, Garamond, Times New Roman, Times, serif) tells the Web browser to do this: "For this text, use Matisse; if you don't find Matisse, use Garamond; if you can't find Garamond, try Times New Roman; if you don't have Times New Roman, Times will do. What? You can't find any of these? That's okay, just use a serif font." We cover how to create a font family later in this chapter.

• Include your text as an image: Say you have your heart set on Matisse and no other font will do. In that case, create the text in a graphics program and save it as an image, such as a GIF file. (We cover how to add images to Web pages in Chapter 5.) If you do this, the text is treated as an image and is displayed exactly as you created it. Keep in mind, however, that some Web visitors may have their browsers set to not show images (especially on mobile devices). Images also slow down a page's load time. For foreign-language visitors, text as images doesn't translate correctly. So if the chunk of text contains information vital to understanding your page, you're better off using font families. You just have to live with the fact that your lovely Matisse font will be substituted sometimes for something less glamorous!

Tip 

Expression Web comes with three predefined font families, listed at the top of the Font list box:

• Sans serif: Arial, Helvetica, sans-serif

• Serif: Times New Roman, Times, serif

• Monospace: Courier New, Courier, monospace

Or, you can make your own font family. (We explain how in the next section.)

Creating a new font family

The saying goes that you can pick your friends but not your family. Not so with font families. If the basic Expression Web font families don't excite you, you can easily make your own family and fill it with the font family members you like best. Just follow these steps:

1. On the Common or Formatting toolbar, click the arrow on the Font list box.

   The Font list box appears, with the predefined font families listed at the top.

2. In the list box, click Customize Font Family.

   The Page Editor Options dialog box appears, with the Font Families tab open.

   Tip 

   You can also get to this dialog box by choosing Tools Page Editor Options. Then click the Font Families tab.

3. In the Select Font Family list box, click the (New Font Family) line.

4. In the Add Font list box, click the name of the first font you want to add to the family.

   The font name appears in the Add Font text box.

5. Click the Add button.

   The font name appears in the Select Font Family list box, at the bottom of the list. Fonts are selected in the order they appear in the font family. We explain this arrangement in the earlier sidebar "Text for the Web: Fonts and font families."

6. Repeat Steps 4 and 5 until you add all the named fonts that you want the font family to contain.

7. For the last selection, choose a font type (such as sans-serif, serif, or monospace), as shown in Figure 3-4.

   You can change the order the font families appear in the Font list box by selecting a font family in the Select Font Family list box and clicking either the Move Up or Move Down button.

   To remove a font family, select it and click the Remove button.

8. Click OK to close the dialog box.

Warning 

Although you can modify a predefined font family (or one you created), Expression Web doesn't give you the option of reordering the fonts within the family. The only thing you can do is add new fonts, which Expression Web sticks at the end of the list. You could end up with a font family that looks something like this: Times New Roman, Times, serif, Georgia. Because the Web browser stops looking for specific fonts when it gets to serif, adding another font at the end of the list doesn't do much good. So, if you need to change a font family, you're better off creating a new one.

Figure 3-4: Choose the type of font as your last selection in a new font family.

GLANCE AT THE CODE 

Earlier in this chapter, we mention that, for all text decoration with the exception of bold and italics, Expression Web uses CSS code, also known as styles. Take a look at the code that Expression Web creates when you assign a font family to some text, as shown in Figure 3-5. We assigned the Arial, Helvetica, sans-serif font family to the second sentence.

Figure 3-5: Split view shows a font family applied to a sentence.

Open Split view (click Split at the bottom of the editing window) and take a look at the code:

 <p>Assign a font family to a selected chunk of text. <span            >This sentence has a sans-serif            font family assigned to it.</span></p> 

Expression Web uses the opening <span> and closing </span> tags to identify the chunk of text we styled. In the opening <span> tag, Expression Web inserts more code that indicates which style applies to this text (in this case, style1), like this:

The word class is a selector. We talk more about selectors and how they're used in Chapter 7, but for now just look at the style that Expression Web created. Scroll up in Code view until you see the style code for style1 that looks like this:

 .style1 {            font-family: Arial, Helvetica, sans-serif; } 

This style rule, or style definition, tells the browser: "On this page, find the stuff between the <span> tags with the class selector style1, and give the stuff the font family Arial, Helvetica, sans-serif."

Style rules are always written in this format, starting with the thing being styled (in this case, a class identified with style1), a curly bracket to start the style rule, a style property (in this case, font-family), and a value for that property (the font family Arial, Helvetica, sans-serif). Properties and their values are separated by colons; each property/value pair ends with a semicolon. This punctuation comes in handy when a style rule contains multiple property/value pairs. At the end of the style rule comes another curly bracket that ends the style rule.

If this style stuff seems a little confusing at first, don't fret: Chapter 7 covers styles in depth. At this point, we just want you to start getting comfortable peeking into the code and paying attention to how Expression Web writes style rules as you format your text.

Changing text size

Text size in print documents is measured in absolute units called points, or picas. When you create a new print document, you set the text size for headings and body text and then print the document, and everything is hunkydory.

Because of the way HTML works, text size in Web pages is based on a relative system of increments. As with font typefaces (see the earlier sidebar "Text for the Web: Fonts and font families"), the default text size is determined by the viewer's Web browser, which they can adjust to make the text larger or smaller. For example, a vision-impaired person may make the text on your page huge for maximum readability, or a software developer may shrink the text to cram as much content as possible onto a large monitor. (By the way, most Web browsers let you set text size by using the View Text Size command).

REMEMBER 

To give you control over the size of text on your pages, and to allow your visitors maximum control over how text appears in their browsers, most Web designers use relative text sizes rather than fixed point sizes. Relative text sizes range from xx-small (roughly 8 points when viewed on a browser with the text size set to medium) to xx-large (about 36 points when viewed on a browser with the text size set to medium). When a viewer increases the text size in the browser, xx-small text gets a little larger, as does x-small, medium, and so on. However, if you assign an exact point size rather than a relative size, the text remains that size, no matter what the text size of the browser is set to. That means that 6-point type in the Web page remains 6-point type on the screen, no matter how much the text size is increased in the browser. Have you ever tried to read 6-point type in a Web browser?

To change text size, on the Formatting toolbar, choose a size from the Font Size list box, or click the Increase Font Size or Decrease Font Size button until you're happy with what you see.

If you must set an exact (or absolute) text size for a selected chunk of text, follow these steps:

1. Choose Format Font.

   The Font dialog box appears.

2. In the Size text box, type the text size followed immediately by the letters pt (for points).

   For example, to make the text exactly 72 points, type 72pt.

3. Click OK.

Changing text color

You can dress your text in any color of the rainbow (plus a few fluorescent shades that don't appear in nature). Color gives your text panache, calls attention to important words, and, if it's coordinated with the colors of the page's graphics, unifies design.

To change the color of selected text, click the down arrow attached to the Font Color button to display a list box of standard colors, as shown in Figure 3-6. Click the desired color swatch to apply that color to your text.

Figure 3-6: Choosing a font color.

If you don't see a standard color you like, you can choose from a palette of 135 browser-safe colors. (We explain what browser-safe colors are in Chapter 5.) You can even grab colors from any object on your screen, such as a graphic or an icon. To do so, follow these steps:

1. On the Common or Formatting toolbar, click the down arrow next to the Font Color button and then click More Colors.

   The More Colors dialog box appears, as shown in Figure 3-7.

   
   Figure 3-7: The More Colors dialog box.

2. In the dialog box's color palette, click the color you like.

   Or, if you would rather grab a color from an existing object, click the Select button. The cursor turns into a little eyedropper. Move the eyedropper over an object on your screen that contains the color you want to use (the active color appears in the New box), and then click to select the color.

3. Click OK.

   The More Colors dialog box closes, and Expression Web applies the selected color to your text.

Each time you apply a color to your page, Expression Web adds that color to the Document Colors section in all color-related list boxes. You run into these list boxes whenever you add or change an element's color in your page, such as hyperlinks (covered in Chapter 4) or table borders (covered in Chapter 10). This thoughtful "extra" makes applying colors elsewhere in your page easy, and it helps you keep an eye on your page's overall color scheme.

To change the body text color for the entire page, follow these steps:

1. Choose Format Background.

   The Page Properties dialog box appears, with the Formatting tab open.

2. In the Colors section, from the Text list box, select the color swatch you like and then click OK.

GLANCE AT THE CODE 

Take a look at the code that Expression Web creates when you change the color of some text. In the following example, we changed the text color in the phrase this text is gray to gray by selecting it from the Font Color palette of standard colors. Here's the code for the text:

 <p>In this paragraph, the phrase <span >this           text is gray</span> has been made gray.</p> 

As in the example earlier in this chapter for applying a font family to a bit of text, Expression Web uses the opening <span> and closing </span> tags to identify the chunk of text we styled. In the opening <span> tag, Expression Web inserts the selector for this style rule: class=stylex. (Expression Web numbers incrementally the styles it creates on a page, so if this is the second style you apply, it's style2.) Now look at the style that Expression Web created:

 .stylex  {            color: #808080; } 

This style rule tells the browser, "On this page, find the stuff between the <span> tags with the class selector style x, and color it #808080." The number 808080 is the hexadecimal number for gray.

Don't worry: You don't have to memorize any hexadecimal numbers for colors. Just pick your colors from the dialog boxes and toolbars that show them. Or visit one of the many color charts on the Web. (A few of our favorites are at http://www.lynda.com/hex.asp# and http://www.webmonkey.com/webmonkey/reference/color_codes.) We recommend that you get used to hexadecimal color numbers because they're the common currency when working with color in Web pages. We talk more about color for Web pages in a sidebar in Chapter 7.

Changing character spacing

Expression Web makes it easy to change the amount of blank space between letters or characters (known in typography circles as kerning). To change the space between selected characters, follow these steps:

1. Choose Format Font to display the Font dialog box.

2. In the dialog box, click the Character Spacing tab to make the options visible.

3. From the Spacing list box, choose Expanded or Condensed.

4. In the accompanying By box, enter the number of pixels by which Expression Web will expand or contract the selected text.

   Note 

   The Position options in this dialog box enable you to control the amount of space between regular text and superscript or subscript text.

5. Click Apply to see how the spacing change looks before closing the dialog box, or click OK to close the dialog box and apply the character spacing.