Selecting Body Text

In most web projects I have designed, I always began with the body text. This is because people spend most of their time reading the content—at least you hope they will—so you want to provide an uninterrupted experience for them. The typeface needs to be unobtrusive, legible, and readable.

In selecting body text for the web, I look for the following characteristics: generous x-height, open apertures, even spacing, clear terminals, and distinguishable ascenders and descenders.

Generous X-height

X-height is the vertical measure of a lowercase x. The x-height is often slightly bigger than half of the cap height, which is the distance between the baseline and the top of the capital letter. The shorter the x-height, the smaller the letter will appear, which can cause the type to become illegible. Likewise, legibility is also reduced if the x-height is too tall. For instance, a large x-height makes the letters n and h difficult to distinguish. The ideal lowercase letters should be just tall enough to be harmonious with their uppercase partners.

x-height
Garamond (left) has a small x-height. Minion Pro (center) has a decent x-height. Lora (right) has the most generous x-height out of the three faces.

Open Apertures

Apertures are the opening gaps found in certain letters such as c, e, and s. Open apertures aid readers to decipher the letters. In contrast, closed apertures negatively affect legibility. For example, in geometric typefaces like Arial and Helvetica, the tiny gap in c can be mistaken for o at smaller sizes.

apertures
Myriad Pro (left) has larger apertures than Helvetica (right).

Even Spacing

Well-designed typefaces for the web should have even letter-spacing to establish a steady rhythm for reading. The space around the letters are as important as the space within them. Letters should not be too close to or too far away from each other. Even spacing speeds up the reading process. Readers can pick out the shapes quicker if the spacing is well balanced.

Even Spacing
ITC Officina Serif has even rhythm.

Clear Terminals

Terminals come in three forms: ball (circular), beak (spur), and teardrop (globular). They can be found in the letters a, c, f, j, r, and y. In long-form text, letters with clear terminals (distinguishable shapes of ball, beak, or teardrop) are easier to spot; therefore, they are more readable than letters with lacking terminals.

Terminals
Hoefler Text (left), with teardrop terminals, and Méridien (center), with beak terminals, are more readable than Helvetica (right), without clear terminals.

Distinguishable Ascenders and Descenders

Ascenders refers to the strokes that extend above the mean line and descenders refer to the strokes that extend below the baseline. The more distinguishable the ascenders and descenders are, the more legible the letters. Most serif typefaces are often ideal choices for reading text due to the noticeable strokes in their ascenders and descenders.

Ascenders and Descenders
Helvetica (left) has less distinguishable ascender and shorter descender than Noto Sans (center). Noto Serif (right), however, has more distinctive characteristics on its ascender and descender than both of the sans serif faces.

Styles and Weights

As you browse through galleries like Google Fonts and Typekit, one of the quickest ways to narrow down your selection for body text is by filtering out typefaces with less than four styles. For a family of type to work as body text, there need to be at least a regular, italic, bold, and bold italic. When you don’t have an italic style in your font files, browsers will try to slant your typeface to give it a faux italic. When you don’t include a bold style in your font family, browsers will double up your typeface to make it bold. Without the true italic and bold fonts, the results are hard on the eyes.

Italic
True italic Sabon (left) vs. faux italic Sabon (right)
Italic
True bold Sabon (left) vs. faux bold Sabon (right)

Contrast

Contrast refers to the thick and thin strokes of a letter. High-contrast typefaces like Didot and Bodoni work well at larger sizes—posters and fashion advertising—but not for running text. In these fonts, thin strokes can be lost and thick strokes can be too prominent at a small size. As a result, the combination of thick and thin strokes interrupts the flow of reading. On the other end of the spectrum, geometric typefaces like Arial and Helvetica can also result in a similar poor reading experience, as they have very little contrast. The uniform letter shapes in these fonts make long-form reading dull and tiresome. For reading text, choose typefaces with medium to low contrast.

Contrast
Didot (left) has too much contrast. Arial (right) has no contrast.

Context

Up to this point, we have touched on the technical details for selecting the body text, but knowing the context in which you will set the text in is also an important consideration. Your type needs to work naturally with your design. Taking responsive web design into account, how does your type work in various platforms? Does it look too wide on a mobile device? Does it look too cramped on a large-screen monitor? Finding the typeface that could strike a balance between the different contexts and devices ensures a consistent experience for your readers.

For further study, read Tim Brown’s “Selecting Typefaces for Body Text.”