1. Start by choosing a typeface for your body text.

Always start by selecting a typeface for your body text. It will influence the decisions of any other typeface like headlines and labels. The look and feel of your body text will have the greatest impact on the ty­po­graphic qual­ity of your design.

There are four main categories of typefaces to choose from: serif, sans-serifs, script, and decorative (I’ll leave discussion of the many subcategories to interested type nerds). For a better readability on product design, it’s better to simply to use a serif or a sans-serif typeface on body text; use decorative or display typefaces sparingly, such as on headlines and short copy.

Serif typefaces got that name because of the small lines attached to the end of a stroke in a letter. Most traditional publications like books, news­pa­pers, and mag­a­zines use serif typefaces for body text.

Sans-serif typefaces are the ones that lack serif details. They often appear more modern than serifs. Sans-serifs used to be the preferred choice for web design because they rendered better on low-resolution screens. Today, screens have higher resolutions and serif fonts look just as good.

It’s more important to know which sans-serif or serif typeface work better for body text, here are some tips on choosing a good one.

Pick a typeface that has at least four styles.

When choosing a font, a quick way to narrow down your options is by filtering down to the ones that at least have a regular, an italic, a bold, and a bold italic style. Some typefaces have a range of weights from 100–900 which give you way more flexibility in your design. Oh, and when I say italic, I mean true italics, not just slanted text.

Choose a typeface with a low stroke contrast.

Stroke contrast is the change of stroke width in a typeface. Some typefaces, like Didot, have a higher contrast, meaning the width in some parts of the letters are way wider than in others. Typefaces with higher stroke contrast can work great for headlines, but usually don’t work as well for smaller body text, where thin lines disappear and leave text unreadable. For body text, use a typeface that has a more consistent width — a low stroke contrast.

Pick a typeface with a balanced x-height.

The x-height is determined by the height of the letter x and is used more loosely to refer to the height of lowercase characters. You want your body text to use a typeface with a balanced x-height to be legible on screens. If the x-height is too low, the caps will appear too big. If it’s too high, then you won’t be able to distinguish between caps and lowercase — or even worse, it could make your text appear to be shouting.