Do not Design By Default

When you talk, you modulate the tone of voice for different audiences. Your voice and cadence alter depending on whom you are speaking to. If you are talking to your boss, your voice (hopefully) sounds very different than if you were talking to your lover, even if the words are the same. Whether you adjust your voice to be formal, informal, humorous, serious, sensuous, or angry, it informs your audience about the meaning of your words.

Many Web designers allow the default values imposed by the browsers or by perceived limitations to dictate the voice of their designs, which dictate the scale and rhythm, and usually not well. It’s like talking to everybody you know in exactly the same voice. Like a robot.

Reset the browser defaults and set your own global styles

Although there is some technical debate over exactly how you should reset styles and which styles should be reset, as a designer, I recommend resetting all typographic and spacing styles and then setting your own defaults. Don’t let the browser determine your page styles. Another good argument for resetting styles is that different browsers have slightly different values, especially for margins, padding, and font sizes; and some browsers include borders where others may not. Resetting the styles gives all of the browsers the same baseline.

The easiest way to reset styles is with the universal selector. Set the default styles you want applied to all tags:

							* {
							margin: 0;
						
						
							padding: 0;
						
						
							border: 0;
						
						
							outline: 0;
						
						
							font-size: 100%;
						
						
							vertical-align: baseline;
						
						
							text-decoration: none;
						
						
							background: transparent;
							}
						

This is a nice, quick way to get the most important styles reset, but it has one drawback: Microsoft Internet Explorer 6 does not recognize the universal selector. If you are concerned about supporting IE6, then you will want to include all of the HTML tags in the selector list. The advantage of using the universal selector is that it will always apply itself to new HTML tags as they become available.

Compose with a scale to create a typographical hierarchy

When scanning a Web page for information, the human eye looks for areas of contrast and areas of consistency. Too much consistency leads to a monotonous design, while too much contrast leads to chaotic noise. One way to balance contrast and consistency is to create a regular typographical hierarchy, where type fluidly scales from the top level (level 1 heading) into the body content (paragraphs).

The scale you choose is up to you, but keep it consistent and easy to remember. You may want to scale based on doubling 2s (2, 4, 8, 16) or multiples of 3 (3, 6, 9, 12, 15) or multiples of 5 (5, 10, 15, 20). These values should inform not only your font sizes, but margins, padding, and widths, as well. Applying ems to scale allows you to create a relative scale that can then be controlled at the top level by setting the font size in the body tag.

One issue to overcome is the inconsistencies that browsers have in resizing fonts relatively. Some fonts exaggerate the size changes more than others, as shown in Table 4.3. One way to alleviate this issue is simply to set the font size of the body tag to 100%, which indicates that all tags should base their relative size on the browser’s default font size.

							body {
							font-size: 100%;
							}
						

Let’s assume a default font size of 16px (the default on most browsers) when you want a paragraph font size of 12px. You can quickly create a scale, simple by using ems to scale the base font size up or down. For lower-level headers, which are rarely used, you can use different styles, weights, or capitalization to differentiate them in the hierarchy.

							h1 {
							font-size: 2em;
							}
						
						
							h2 {
							font-size: 1.5em;
							}
						
						
							h3 {
							font-size: 1.125em;
							}
						
						
							h4 {
							font-size: 1em;
							}
						
						
							h5, h6 {
							font-size: .875em;
							}
						
						
							h6 {
							font-style: italic;
							}
						
						
							p, li, q, blockquote  {
						
						
							font-size: .75em;
							}
						

Make links clear, not cluttered

The default style for hypertext links on the Web is underlined, so this is the style that readers have become accustomed to scanning for. Unfortunately, underlines do not contrast with the text, so they add visual noise to the very elements they are meant to highlight. Additionally, since not all links are created equal, underlining all links—even those in navigation and controls—diminishes the overall typographic contrast of your page.

There is a better way to underline links than using the underline style. Adding a border to the bottom of a link gives you an underline that you can style. Start by turning underlining off in all links on your page:

							a { color: rgb(0,0,255);
						
						
							text-decoration: none;
							}
						

If you really need a link type to be underlined—for example, links in paragraphs—add it back on a case-by-case basis, using the border-bottom property instead of underline. This lets you create a controlled underline with different colors and styles:

							p a:line {
							border-bottom: 1px solid rgb(153,153,255);
							}
						
						
							p a:visited {
							border-bottom: 1px solid rgb(204,204,255);
							}
						
						
							p a:link {
							border-bottom: 1px dotted rgb(153,153,255);
							}
						
						
							p a:active {
							border-bottom: 1px solid rgb(255,0,0);
							}