Decoration

Unlike other typographic styles, text decoration styles do not change the individual characters, but are applied equally across a block of text. While there are currently only a few limited text decorations, and I recommend avoiding most of them, new decorations are on the way in CSS3.

Do not use underline to underline links

While it is the default style given to links, and it is true that users respond to underlined text as hypertext links, the underline style is a crude and unattractive way to underline link text. Underline places a rule (line) 1px below the baseline of the text in the same color as the link, adding visual noise to the design and obscuring any character’s descenders.

Additionally, not all links are created equal. Simply underlining a large list of links does little more than add clutter, interfering with scannability. Although adding white space can improve this, there is a better way to underline links, which I’ll explain later in this chapter (in “Color”). Turn underlining off for all links, and then add the underlining back selectively, depending on context.

							a {
								text-decoration: none;
								}
							
						

One other place that underline is used is with book titles, but that’s a holdover from typewriters, and book titles should now be italicized, really leaving underline with nothing to do.

Use strike through to indicate deleted text

One case where text decoration can be useful is indicating that a particular block of text has been deleted or edited. Use the line-through property, which places a rule through the mean line of each character affected. The best way to accomplish this is by creating a specific class that can be applied to HTML text using a span tag:

							.deletetext {
							
						
							text-decoration: line-through;
							}
						

Text shadows add depth, but do not rely on them to convey information

Although not officially a part of the CSS specification yet, text shadow will be in the forthcoming CSS Level 3 spec, and Safari, Firefox, and Opera have all implemented the style. Add a shadow underneath any text, controlling the left/right and up/down offset, as well as the color:

							text-shadow: -2px 2px 10px rgb(0,0,0);

You can combine the text shadow with a transparent color to control the darkness of the shadow and include multiple text shadows just by repeating the values separated by a comma:

							text-shadow:                                 
						
							0 0 10px rgba(0,255,0,.5),      
						
						
							-10px 5px 4px rgba(0,0,255,.45),
						
						
							15px -4px 3px rgba(255,0,0,.75);
						

Change opacity to tint text with the background color

Although text opacity is better set using the RGBA format, explained later in this chapter, opacity and the Internet Explorer equivalent, filter:alpha(), are more universally available.

When you set the text to be slightly transparent, the background color tints the glyphs, creating a harmonious tone. This can be used to highlight certain text—for example, emphasized or link text. Then you can change the opacity when the text is hovered over with the user’s mouse:

							em {
							opacity:  .75;
							
						
							filter: alpha(75);
							}                    
						
							em:hover   {
							opacity: 100;
							
						
							filter:  alpha(100);
							}