Designing with fonts

Believe it or not, some people spend years studying fonts and typography. In fact, it was only a generation ago that people did not work with fonts unless they had some formal graphic design or printing education. All of this changed with desktop publishing in the 1980s and web publishing in the 1990s. As LiveCycle programmers, we work with fonts and typography on a daily basis, and one of our biggest mistakes is the overuse of ALL CAPITAL LETTERS.

ALL CAPITAL LETTERS

I have read some postings and articles that recommend NEVER using ALL CAPITAL LETTERS. These designers point out that all capital letters are more difficult to read and are often overused by non-graphic designers. Although I agree with these points, I think there are some cases where capital letters are valuable in form design. However, as a general rule, use them sparingly.

The problem with ALL CAPITAL LETTERS

The capital letters of a given font are usually the same height and width as one another. Setting your text in all capital letters creates a block effect that makes the words more difficult to read. This is particularly true when the text is bold. The result is a block that is uninviting and difficult to process. This block effect makes it more difficult for the reader to differentiate between words and characters. Upper and lower case typography reduces this block effect and makes the reading and processing of information easier.

According to Karen Schriver in her book Dynamics in Document Design, "When text is set in all capital letters, reading speed is slowed about 13 to 20 percent. Reading speed is optimal when uppercase and lower case letters are used."

I recommend the use of upper and lower case letters to improve the readability of your forms. Too many forms overuse capital letters in an ill-conceived attempt to command attention. I have seen this especially on government forms from the state of New Jersey. The state seems to think that if they set the text in ALL CAPITALS, it will be noticed and understood by more residents. I think the opposite is true. If you don't agree, try reading the previous two sentences in all capital letters: THE STATE SEEMS TO THINK THAT IF THEY SET THE TEXT IN ALL CAPITALS, IT WILL BE NOTICED BY MORE RESIDENTS. I THINK THE OPPOSITE IS TRUE.

Get attention the right way

There are other ways to communicate the importance of certain text besides capital letters. One simple way to denote emphasis without compromising readability is to use a bold font and increase the paragraph spacing. In Figure 1, we have set the font to bold and increased the paragraph spacing. Both of these steps have provided emphasis to the first line of copy without compromising on readability.

Figure 1. Using a bold font with increased paragraph spacing communicates emphasis without the block effect of all capital letters.

This type effect is very easy to achieve in LiveCycle Designer with the Font and Paragraph palettes. I used the following settings (see Figure 2) to create the design illustrated above.

Figure 2. The Font and Paragraph palettes in LiveCycle Designer can be easily used to achieve the typographic effect shown in Figure 1.

Stop shouting at me

In addition to readability concerns, you should also be aware of how ALL CAPITAL letters are being perceived by the reader. Although this is a relatively recent phenomenon, the use of ALL CAPITAL LETTERS is starting to seem down-right rude. In e-mail communications and web posts, all capitals are used to suggest anger or shouting. I do not necessarily know if or when this perception will transfer to interactive forms, but why chance it?

Having said that...

Now that I have argued against all capital letters, I will confess that I have used them occasionally in my own form designs. However, I have used them sparingly and for a specific reason. One reason to use all capital letters is to create a bar-like effect for a section header. Notice how the limited use of all capitals in the section headers in Figure 3 helps to create a bar-like effect that differentiates the different sections for the user.

Figure 3. Use ALL CAPITAL LETTERS to create a bar-like effect for section headers.

Rich text and XHTML in LiveCycle Designer

Using ALL CAPITAL LETTERS to create a bar effect is also valuable when working with LiveCycle Designer's rich text fields and XHTML data input (available in version 7.1 and 8.x). The example in Figure 3 was created in LiveCycle Designer's Layout Manager, and I could have created an actual black bar with white copy for the section headers. The Layout Manager offers a lot of graphic controls. However, when you are working with XHTML copy in the input XML file, you do not have all of the same graphic options that are available in the Layout Manager of LiveCycle Designer. In this case, the ALL CAPITAL LETTERS method is a great way to create section headers.

If you have never worked with rich text in LiveCycle Designer, the following steps will help you. Your first step is to create a text field in LiveCycle Designer and set the properties as detailed in Figure 4.

Figure 4. Use the Object and Layout palettes to set the text field's properties.

Once you finish your text field, you can create the XHTML. The XHTML is part of your input XML file. I have included it with the sample files on our website. You can also read more about the use of XHTML text in LiveCycle Designer in Adobe's Data Text Handling Specification 2.0.

The XHTML produces rich text in the PDF preview. As you can see in Figure 5, the ALL CAPITAL LETTERS with the bold font creates a bar-like separator between the different sections of text.

Figure 5. The XHTML produces rich text in the PDF preview.

The cancellation effect

If you are using ALL CAPITAL LETTERS in your form design, please use them sparingly. Some forms that I have reviewed used ALL CAPITAL LETTERS so often that they began to cancel each other out. It is a maxim of design that if everything is important in your design, nothing is important. If you use ALL CAPITAL LETTERS to indicate primary copy, then use upper and lower case text to indicate secondary and tertiary copy. Remember, if everything is primary, nothing is primary. I will show you an example of this in the next section on button design.

Page 2 of 5

Previous Page

Next Page