When you're working on a new design, you need to determine what the most important part of the page is. If your reader gets only one thing from the Web page, what should that one thing be? The challenge of asking this of your clients is that they will invariably say "it's all equally important". If you attempt to make everything on a page emphasized (or bold, or h1, or whatever), you will end up with a page that has very little appeal. At best, nothing will stand out, and at worst the entire design will be flat and boring.



In order to invite some order to the chaos, you need to assign a hierarchy to the elements in the design. One thing will be the most important, followed by the second most important item(s), and then the third, and so on. This serves two purposes:

1.The hierarchy tells the customer how the page is meant to be viewed. Their eyes are drawn to the most important element on the page, followed by the second most, and so on through the hierarchy.

2.The hierarchy provides emphasis on the important elements of the page without blending everything into a boring muddle.

Techniques for Providing Emphasis and a Visual Hierarchy on Web Pages

Headings The first place you should look to create a visual hierarchy is with your HTML. The HTML heading tags provide a built-in hierarchy for your use. But most Web designers forget them. (Even the designers of the Web Design / HTML site on About.com left out the H1 tag in their hierarchy.)

The problem with the heading tags is that they are ugly. But that is what style sheets are for. If you want your Web pages to be well designed and have a good hierarchy, they should have the headings in order: h1, h2, h3, h4, h5, and then h6. Yes, h1 is ugly, but you can style it to make it look good. By using these tags, you ensure that your hierarchy is maintained even when the page is viewed by non-visual browsers.

The Most Important Element

The 2nd Most Important

The 3rd

The 4th

The 5th

The 6th

Font Size Changing the font size is an easy way to provide visual hierarchy and emphasis to your Web pages. The larger the font size is for an element, the more important it will appear. A headline that is 3em with surrounding text of 1em will be visually 3 times larger than the surrounding text. This immediately emphasizes that text.

You can change the font size of any text on your Web page, but if you're using it for emphasis, the best way is to style your headlines and paragraph text to the size you want. Here is how you might style headlines and paragraphs on a Web page:

p { font-size: 1em; }

h1 { font-size: 2.5em; }

h2 { font-size: 2em; }

h3 { font-size: 1.5em; }

h4 { font-size: 1em; }

h5 { font-size: .8em; }

h6 { font-size: .7em; }

As you can see, h1 is going to be extremely large compared to the normal size text on the page (2.5 times larger). But as I got to the smaller headlines (h4, h5, and h6) I didn't reduce the size as drastically. This is because small fonts can be very difficult to read and legibility trumps precise emphasis every time in my designs.

Element Size Just like font sizes, the size of the elements on the page can provide emphasis. The larger an element is on the page, the more emphasis it's going to have. In Web designs, you can adjust the relative size of elements by changing the background color of the container box or with graphics that are large or small.

A simple one column layout with a large graphic in the middle of the page emphasizes the graphic. While a 3-column layout with one wide column flanked by two narrower columns tells your readers that the wide column is the important one.

Colors Color is another great way to provide emphasis. Contrasting colors used sparingly make the colored elements and text jump out of the page. This is why links are often the most prominent feature on a Web page. If the page is primarily black text with occasional blue links, the links are going to stand out and have more emphasis.

The key to color use for emphasis is to use it judiciously. If you alternate your navigation between red on purple and purple on red all you'll do is blind your readers. But if you have a color scheme where the primary colors are muted, and then one navigation link is bright red or purple - that link will attract attention.

You can attach the color to headlines or to blocks of text. This CSS changes only the h2 tags that you've given the class "important" and the paragraphs with the class "calltoaction":

h2.important { color: red; }

p.calltoaction { background-color: yellow; }

Spacing, Location, and Whites pace Placement of your elements can do a lot for the emphasis. If you have one element placed in the middle of the page - with a lot of whites pace around it, that element will be emphasized, even if it's small or light in color. Also, in Web design, the location of an element helps determine it's emphasis. If you place an h1 header low on the page, so that customers have to scroll to see it, it will have less emphasis than the h2 or h3 headers higher up on the page. Use CSS to change the leading, kerning, and tracking of your text to change the emphasis.

HTML Emphasis Tags There are two HTML tags used for emphasis: and . Most people think of these as "bold" and "italics" but in reality they are intended to provide emphasis () and stronger emphasis (). As with other tags, you can use style sheets to style these tags however you want.

The benefit to using these tags (rather than a more generic tag) is that you are providing information to the browser about what the text is, not just how it should be displayed. In other words, a browser that reads the text out loud would know to provide more emphasis on words tagged but not for text tagged .

Change your strong and em tags to have exactly the styles you want to use to emphasize your text. Remember to change the font style and weight to normal if you don't want them to be bold or italic:

em { font-style: normal; color: #ccf; }

strong { font-weight: normal; color: red; }