When typesetting for the web, I recommend begin with the body text. People spend most of their time reading the main content; therefore, you want to provide an uninterrupted experience. 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, distinguishable ascenders and descenders, styles and weights, contrast, and context.

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.

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.

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.

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.

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.

Styles and Weights

As you browse through galleries like Google Fonts, 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.

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.

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.