Creating a hierarchy through font style and size

You can help guide your user through your form by using font style and size to create a hierarchy of information. Use a bolder weight and larger size for section headings and a lighter face and smaller size for labels. As long as you don't use too many font sizes, this method creates visual distinctions in your type which will help the user better understand the hierarchy of the form.

You should also follow this method to create an organized structure in your form sections. Consider how the following form section can be improved by applying contrasting font styles and sizes to create an information hierarchy (see Figure 6).

Figure 6. Font size and style do not accurately represent the hierarchy

The form section detailed in Figure 6 does a very poor job of using font style and size to communicate the information hierarchy. The designer chose 10-point Avenir 85 Heavy for the section header (Account Setup). Unfortunately, the designer picked a heavier font (Avenir 95 Black) for the text field captions. This does not help the user understand the form's information hierarchy by quickly scanning the page.

The section header is higher in the hierarchy than the text field captions but the type treatment works against this reality. Furthermore, the text label, "Participant (Account Owner) Information" is set in the heaviest font (Avenir 95 Black) and is also set in ALL CAPS. This line of copy almost overwhelms the section header. The only saving grace is that the designer surrounded the section header with white space to give it some emphasis.

We can improve this design by using font size and style to communicate information hierarchy. In Figure 7, we have the same design but now we provide the correct type contrast to communicate the hierarchy to the user. The section header is now the most dominant item because we are using 12-point Avenir Black. We have switched the labels down to the Roman style of the Avenir font, which provides a suitable visual contrast with the section header.

Figure 7. Font size and style help communicate the information hierarchy

We also made the information hierarchy clearer by decreasing the amount of font styles and sizes, and using each different font style/size in a meaningful and consistent way. The previous design used seven different combinations of font styles and sizes; the new design only uses three. Table 1 shows how we are being more consistent and purposeful with our font style and size selections.

Table 1. Comparison between old and new design to convey form information

Old design (Figure 6)	New design (Figure 7)
1. Avenir 95 Black 9.5-point	1. Avenir 95 Black 12-point for section header
2. Avenir 95 Black 10-point	2. Avenir 65 Medium 9.5-point for caption copy
3. Avenir 85 Heavy 9.5-point	3. Avenir 35 Light 7-point for support copy
4. Avenir 85 Heavy 10-point
5. Avenir 55 Roman 7-point
6. Avenir 55 Roman 9-point
7. Berkeley OldStyle Book 7-point

There may have been a reason that the designer chose to provide such visual emphasis to the text field captions. It's possible that these items are required to be filled in and other text fields in the form are not required. In situations like this, try to highlight the required field without resorting to such visual confusion.

Don't use underlining to create hierarchy

This may sound similar to my previous admonishment in Part 1 not to use ALL CAPITAL LETTERS. Although design can be subjective, there are some basic rules that will make your form design look a lot more professional. This is one of them. When you are working to create a hierarchy for your form, try to stay away from underline and italic text. Underlining is pretty much a throwback to the typewriter and it doesn't provide the same clarity of contrast that you can achieve with bold and regular fonts. Also, underlining overlaps the descenders of the letterform and ruins the visual beauty of the letterform and the readability of the word.

Consider how the bold font in Figure 8 provides better contrast clarity and readability than the underlined font. The sample on the right achieves the necessary contrast without violating the descenders of the g and p letterforms.

Figure 8. Avoid underlining

The general rule (which also covers the ALL CAPS problem) is to use font style contrast instead of ALL CAPS or underlining when you want to achieve emphasis.

Page 4 of 6

Previous Page

Next Page