Accessibility

Table of Contents

Creating graphically effective form design – Part 2: Typography

Basic font types

There are basically two types of fonts: serif and sans-serif. Serif fonts feature fine lines that finish off the main strokes of the letterform. As you might guess, sans-serif fonts do not have serifs. Sans-serif fonts also have very little variation in the thickness of the stroke and generally have a more modern appearance. You can see the main differences between serif and sans-serif fonts in Figure 1.

Serif and sans-serif fonts

Figure 1. Serif and sans-serif fonts

Serif fonts

Originated by Roman stone masons, serif fonts are sometimes referred to as Roman fonts. The stone masons needed to end their font strokes with a serif to make up for the crudeness or their tools. One can also imagine that it was somewhat challenging to chisel letterforms out of stone 2,000 years ago.

Serif fonts are often used for books and magazines because they are generally believed to offer better readability for large text areas. This belief is based on the theory that the horizontal flow afforded by the serif produces a better horizontal flow for the reader (see Figure 2).

Serif fonts afford a better horizontal flow

Figure 2. Serif fonts afford a better horizontal flow

This has been documented with print-based materials in many studies and books including the following:

However, research into the improved readability of serif fonts for online reading does not show the same results. According to research conducted by Web Marketing Today, readers of online websites prefer sans-serif fonts for readability. In a survey that they conducted of over 1,600 readers, sans-serif fonts were preferred by a 2:1 margin.

So what should we do as LiveCycle designers, since our forms are used both online and offline? I think we should make our best judgment based on the most common-use case for our forms. If our forms have large text areas for support verbiage that will not be read online (like customer agreements and legal terms), I would use a serif font. However, if we have areas of explanatory copy that a form filler needs to read as they fill out forms online, we should consider using a sans-serif font.

The research of online font readability preferences shows that Arial 12-point was the easiest to read. However, in smaller sizes like 9- and 10-point, Verdana was preferred. Verdana is an interesting typeface because it was specifically designed by Microsoft for online use. According to the Microsoft literature on Verdana, it was specifically designed so that the pixel patterns at small sizes are pleasing, clear, and legible. I think they met their design goal because it is highly readable online in small type sizes. Verdana is a great choice when you need to achieve online readability at small point sizes.

Sans-serif fonts

Sans-serif fonts were first introduced by William Caslon IV in 1816 but they did not become popular until around 1919 when Walter Gropius started the Bauhaus school. Sans-serif fonts offer a big advantage to the form designer because they offer greater contrast between their bold and regular font styles. This greater contrast enables us to create a better hierarchy for our forms (see Figure 3). We will explore the ideas of font style contrast and form hierarchy in upcoming sections.

Sans-serif fonts offer better contrast

Figure 3. Sans-serif fonts offer better contrast