Section 6.2. Looking at Appearance Attributes

6.2. Looking at Appearance Attributes

With CSS, and by extension with Dreamweaver, you get a host of styling options or appearance attributes for the text on your site. You get so many, in fact, that this humble tome can't possibly explore them all. What it can do is to present the most important of these to give you a feel for the possibilities and leave the excitement of exploration to you.

TECHTALK

Appearance attributes are the styling options for a page element such as a block of text.

6.2.1. Considering Fonts

The typefaces or fonts that you choose for your web site make an important contribution to the overall look and feel of your design as well as the readability of your pages.

TECHTALK

The font is the typeface of the text.

Before diving into this discussion, it's worth pointing out that the fonts that the browser displays on your site come from the visitor's computer, not your computer, which tends to limit your typographical choices. If you're a graphic designer, no doubt you have accumulated an impressive collection of obscure fonts over the years, but sadly you must overlook them for your web project, simply because your visitors aren't likely to have these fonts on their computers. You want to go for the obvious picks instead, the fonts that everyone has. Some designers refer to these as web-safe fonts, although perhaps safe isn't the best word for them. You won't crash the Internet if you happen to use a non-web-safe font on your site. Your pages just won't look the way that you want them to look for the majority of your audience.

TECHTALK

A web-safe font is a font that most computer users have on their machines.

With that in mind, you can divide web fonts into three types: serif, sans-serif, and monospaced, as shown in Figure 6-5. Serif fonts have little decorations on the ends of the characters, while sans-serif fonts don't. In monospaced fonts, all the characters in the set have the same width, much like the text from a typewriter. Aside from this, monospaced fonts can be either serif or sans-serif, although they are more commonly serif fonts.

Figure 6-5. Here are the three types of web fonts

Table 6-1 lists the most common fonts of all three types. You should strongly consider using these fonts in your site rather than chancing it with less web-safe candidates.

BEHIND THE SCENES

One way to get around web-safe fonts is to embed the font of your choice on your page. Microsoft's Web Embedding Fonts Tool (WEFT) does the trick, but it's far from perfect. For one thing, the tool works only on Windows machines, the embedded fonts appear only in Internet Explorer, and you can embed only TrueType fonts. (Type 1 fonts are probably the most common format for graphic designers, and WEFT doesn't support them.) Also, embedded fonts add extra download time, so your site takes a performance hit. Still, if you want to present your text in a nonstandard font, WEFT gives you the option.

For more information, see http://www.microsoft.com/typography/web/embedding/weft3/.

Table 6-1. The most common fonts on Windows and MacOS systems

Font type	Windows fonts	Macintosh fonts
Serif	Times New Roman, Georgia	Times
Sans-serif	Arial, Verdana	Helvetica, Geneva
Monospaced	Courier New	Courier

TIP

The proviso about web-safe fonts applies only to the text that appears as text on your page. Text that you include inside images, like the label on a button, is part of the image filethe letters in their particular typeface are built into the image. Therefore, the visitor doesn't need to have the same fonts to see the image exactly as you designed it.

To compensate for the visitor-centric model of font selection, the browser allows you to supply a list of acceptable fonts instead of locking you into a single pick. For instance, you might decide that your general paragraph style looks best in Geneva but that Times for your Mac users and Times New Roman for your Windows users who don't have Geneva are all suitable substitutes. You'll get into the concept of font lists more thoroughly when you actually build your stylesheet in Chapter 12. For now, just keep in mind that you can give a range of fonts for each of your text elements.

BEST BET

At most, define one serif font list, one sans-serif font list, and one monospaced font list for your site.

In theory, you can specify a different font list for every style rule in your Cascading Style Sheet, but in practice you pick one or two lists and use them for all the text formats and class styles that you define. At most, you want one font list of each type: one serif list, one sans-serif list, and one monospaced list. Use more font lists than this, and your site takes on something of the ransom-note aesthetic, with too many competing typefaces.

Here are a few general guidelines for font selection:

Serif fonts work well as running text

The little decorations on the ends of the characters create a kind of horizontal channel at relatively small sizes, helping the reader to follow the lines of text. This is especially helpful on the Web, where your visitors absolutely will not read your text word for word. They skim the page instead and only slow down when they come to the exact piece of information that they want. For the typical paragraph or list style, the serifs are a good choice.

Sans-serif fonts work well as headings

Sans-serif fonts, with their unadorned style, tend to look bold and commanding in larger type sizes. This helps to draw attention to your headings. Furthermore, if you choose a serif font for your paragraphs, the sans-serif font in your headings makes a nice visual distinction to reinforce the conceptual one between the formats.

Serif fonts tend to be more serious

If you want to lend an informed, authoritative air to your text, consider casting it in a serif font. The more formal style of the serifs helps to reinforce the idea that your words are sober, reliable, reasonable, and correct, don't you know.

Sans-serif fonts tend to be less serious

Informal, jovial, friendly, or welcoming text works better in a sansserif cast. The characters in a sans-serif font are straightforward and unpretentious, so the reader tends to associate these attributes to your words.

Reserve monospaced fonts for display text

Monospaced fonts work exceptionally well on the Web in small quantities. They're particularly effective for offset blocks of text such as lines of computer code, instructions about what to type next, or quoted passages from books or movies. You can also use monospaced fonts to highlight the names of keyboard keys or buttons inside standard running text, but avoid them for the standard running text itself, as it tends to be hard to read in large chunks.

6.2.2. Considering Type Size

Type size measures the length or height of the characters in a block of text. The higher the type size, the larger your text appears on screen. You may specify a different type size for every style rule in your stylesheet.

TECHTALK

Type size measures the length of the characters in a block of text.

CSS gives you a number of ways to measure type size, including traditional typographic measurements like points, picas, and ems, but for the Web it's usually best to think in terms of pixels. The page width, the width of your layout, and the dimensions of many of your design elements are expressed in pixels, so it's convenient for you to measure the size of the text in the same way. Also, pixel-based text tends to be more consistent across browsers, so you have a higher degree of confidence that your visitors see your text as you designed it.

BEHIND THE SCENES

The pixel is a relative measure of length. You may recall from the discussion in Chapter 5 that, by increasing the resolution, you pack more pixels into the same physical area, thereby giving you smaller pixels.

By contrast, points, picas, inches, and millimeters are absolute measures of length. A point is always a certain fixed length. While this might sound advantageous for type sizing, browsers aren't especially good at these types of measures. What IE says is a point isn't necessarily what Firefox says on the subject. But browsers are very good at measuring pixels. They do it often enough.

Also, because points are absolute, what happens if your type size is absolutely too small for some of your visitors? They have no easy way of adjusting the size of your text, because a point is always a point. Not so with pixels. Your visitors can increase the text-size setting in their browser or decrease their screen size if all else fails. Either way, the text gets bigger and easier to read. Besides, most computer monitors display at 96 or 72 ppi, so pixels are more or less the same size for all your visitors anyway. When you express type size in pixels, you get "virtual" absolute sizing without the drawbacks.

As a point of reference, the average type size for running text on the Web is about 12 pixels, but depending upon your design, 12 pixels can easily feel too large. Screen real estate is always a precious resource in web design, so it behooves you to think small. You don't want to think so small, though, that your text becomes illegible. Reading on a computer screen is hard on the eyes as it is. Add to this the fact that your visitors are skimmers, and legibility becomes the driving goal of your online typography.

TIP

At smaller type sizes, relatively wide fonts like Georgia and Verdana work best.

The best approach to sizing your text is to experiment with different length values during the building of your site. Many variables affect the overall legibility of your text, including the background color of the page and your selection of font. However, even in the best case, the smallest useful type size is about 8 pixels. Set this as your lower boundary, and work your way up.

BEST BET

Don't go smaller than a type size of 8 pixels.

6.2.3. Considering Spacing

You want spacing? You got spacing. CSS gives you spacing in every conceivable sense of the term, as this section illustrates.

TECHTALK

The box is the (usually transparent) rectangle that contains a block of text.

To begin, let it be known that a block of web text, whether it's a single line or an entire paragraph, sits inside a rectangle or box. By default, the box is completely transparent, but its rectangular shape becomes apparent when you give it a border or background color (see "Considering Colors and Borders" later in this chapter). It's good to bring this up now, as visualizing your text as sitting in a box helps you to make sense of some of the spacing options available to you.

TECHTALK

Line height is the amount of space between lines of type.

6.2.3.1. Looking at line spacing

Normally, lines of text on the page are roughly as tall as the type size. Therefore, if you're displaying 16-pixel text, your lines are about 16 pixels tall. But with CSS, you can change the line height, as Figure 6-6 shows.

Figure 6-6. These paragraphs in 16-pixel type have a line height of 24 pixels

Because your lines are normally as tall as your type, you can very easily compute the line height for different kinds of spacing. Assuming that you have 16-pixel text, a line height of 16 pixels is the equivalent of normal, single-spaced text. A line height of 24 pixels gives you line-and-a-half spacing (16 times 1.5). For double spacing, increase the line height to 32 (16 times 2).

TIP

To improve the legibility (and skimmability) of your running text, particularly when you have multiple paragraphs one after the other, you might try line-and-a-half-style spacing. To do this, set the line height to 1.5 times the type size.

6.2.3.2. Looking at word and character spacing

You can control the amount of spacing between the words in a line of type. In Figure 6-7, the second paragraph has three extra pixels of word space, which makes it easier to read at this small type size.

Figure 6-7. Increasing the word space improves readability

Generally speaking, the larger the type size, the less word space you need. It's smart to decrease the word spacing for headings and the like, so you can fit more words onto a single line. Conversely, if your running text is 8 or 9 pixels long, you could probably stand to increase the word spacing to improve legibility.

TIP

Wide fonts like Verdana often look better with extra word and character space. Condensed fonts often look better with less of both.

Similarly, you can control the amount of spacing between characters in a line of type, as Figure 6-8 shows. Character spacing follows the same general guidelines as word spacing in terms of when to increase and decrease it. For large type sizes, less character space works well. In Figure 6-8, the words in the second heading have two fewer pixels of character space, giving it a more compact look and making it easier to read.

Figure 6-8. The second heading has two fewer pixels of letter space

6.2.3.3. Looking at margins

Normally, the box of a text element is as large as it needs to be to accommodate the text inside it. The four margin attributestop, bottom, left, and rightdetermine the size of a box above and beyond its normal size. Most often, you use margins to set the "printable" area of the entire page, but individual text elements like paragraphs can also have margins. For example, you can design your paragraphs to have shorter margins than those of the page, which gives your text an offset appearance. In Figure 6-9, the paragraphs on the page have a left margin of 30 pixels more than the page's left margin and a right margin of 60 pixels less than the page's right margin.

Figure 6-9. Offsetting text by adjusting the left and right margins

TECHTALK

Padding is the amount of space between the margins of a box and the edge of the content inside it.

6.2.3.4. Looking at padding

The padding attribute controls the amount of whitespace between the margin of the box and the edge of the content inside it. Like margins, padding also comes in four flavors: top, bottom, left, and right. In Figure 6-10, the top paragraph has no padding, while the bottom paragraph has 10 pixels of padding on all four sides.

Use padding to position content inside its box. Because the areas of your design sit tightly against each other, padding is an essential attribute for helping your design to breathe. For example, if you have a side-nav design with a banner across the top of your page, your main content area probably sits in the lower right of the layout. Some tasteful padding along the top and down the left side of the main content area gives you a nice cushion of space, which helps to separate the content from the interface-type elements in your design.

Figure 6-10. The effect of padding on paragraphs

6.2.4. Considering Colors and Borders

To give your text that extra graphical appeal, you can apply color to both it and its box, and you can set its box in various types of borders.

6.2.4.1. Looking at text color

Use any one of your computer's 16 million distinct shades to color your text. Applying color to the text element's box creates an opaque rectangle on the page with the text inside it, as shown in Figure 6-11. You can also color the text itself independently of the box's color (or lack of one).

Figure 6-11. This paragraph has white text against a black background

But just because you can do something doesn't mean that you should. While coloring the box of a text element is appropriate whenever you need this effect, coloring the text itself can cause problems, particularly if you single out individual words here or there for the color treatment. Text of one color in the middle of text of another color looks suspiciously like a hyperlink to your visitors, who will no doubt try to click it. When nothing happens, they become frustratednot a good thing.

TIP

Remember that your text has to be readable as well as skimmable. Whatever color scheme you choose for your site, you want the main content area to have a sharp foreground/background contrast. Dark text against a light background works best. Light text against a dark background is passable, although it lends itself more readily to eyestrain, particularly at smaller type sizes. And above all, avoid glaring or gaudy contrast, like chartreuse against magenta. It's unlikely that you topped your list of goals with, "To induce nausea and promote splitting headaches."

That said, you can often get away with colored text if you use it consistently. For instance, setting all your headings in a different color than your running text doesn't normally lead to confusion, because the headings serve a different purpose than the paragraphs on your page. They're designed to separate sections of content, so your visitors are expecting them to contrast with the running text and therefore won't necessarily conclude that they are hyperlinks.

BEST BET

Avoid using two or more different colors inside the same text element.

TECHTALK

The weight of a border is its thickness.

6.2.4.2. Looking at borders

When you add a border to a text element, you outline its box, as Figure 6-12 shows. The border can be of any color and weight or thickness, and you may choose from several styles, including solid, dashed, and dotted.

Figure 6-12. This paragraph has a dashed border

Borders around text elements work especially well when you also color the element's box. The effect is perfect for sidebars, special-attention-type announcements, and the like.

TIP

You can set each side of the border independently. So the top and left borders can be one color, weight, and style, for example, while the right and bottom borders can be another color, weight, and style.

You can also leave off any of the four sides of the border while keeping the others.