9 desirable characteristics of a body-text typeface

Fira Sans typeface to show generous x-height (2), distinguishable descender (3), even spacing (4), open apertures (5), and medium contrast (6). Source: Professional Web Typography by Donny Truong.

Any user interface design involves the choice of typefaces. There are hundreds of typefaces available. Quickly narrowing down your choices for a given design project is a crucial skill for designers.

I’ve been surveying books and blogs on typography to figure out what to look for when choosing typefaces. These includes:

Cyrus Highsmith. 2012. Inside Paragraphs: Typographic Fundamentals (Boston: Font Bureau).

Tim Brown. 2014. “Choosing Typesets for Body Text,” Typekit Practice (practice.typekit.com).

Donny Truong. 2016. “Selecting Body Text,” Professional Web Typography (prowebtype.com).

Tim Brown. 2018. Flexible Typesetting (New York: A Book Apart).

Both Truong (2016) and Brown (2018) advocate for the “body-text first” approach. Choose a typeface for body text first and then choose the others that complement it for headings and UI components (buttons, navigation bars, etc.).

Then how can we narrow down our choices for a body-text typeface? Putting the four sources of information together, I have learned that there are 4 qualities that a body-text typeface should satisfy.

#1 Each letter is legible at small sizes

Body text needs to be at small sizes: otherwise the reader cannot instantly recognize each word in a sentence (Highsmith 2012, pp. 38–39). Small sizes make letters less distinctive from each other. The shape of each letter needs to be distinctive enough even at small sizes.

To achieve the legibility at small sizes, there are five characteristics that a typeface needs to possess (Truong 2016):

  1. Generous x-height
  2. Open apertures
  3. Clear terminals
  4. Distinguishable ascenders and descenders
  5. Lower contrast

For the detail of each, see Truong (2016). I cannot explain these any better than he does.

Truong (2016) also lists up the typefaces disqualified for these conditions: Garamond (x-height relatively small), Helvetica (apertures relatively small; without clear terminals; less distinguishable ascenders and descenders), Didot (contrast too high).

#2 Each word is easily recognizable

We read by word, not by letter (Highsmiths 2012, pp. 26–43). The reader should then be able to easily recognize a group of letters as a word.

To achieve this quality, a typeface should possess two characteristics:

  1. Even spacing
  2. Not too short x-height

Even spacing means that each letter of a word appears at an equal interval from each other. This way, letters of a word are recognized as a group, encouraging us to interpret it as a word. No one explicitly points this out, but it seems to me this is the most important reason for why even spacing matters.

Short x-height makes the capital letter at the beginning of a word look separated from the rest of lowercase letters (Brown 2014), hindering our ability to quickly recognize a word.

#3 The reader won’t get distracted from reading

If a particular letter has a strange shape or texture, our reading experience will be interrupted. A body-text typeface shouldn’t assert itself. There are two characteristics to achieve this aim.

  1. Few frills
  2. Even color

For the detail of each, see Brown (2014). I cannot explain any better.

Typefaces with too many frills include Fira Sans (lowercase g and l), pointed out by Brown (2018), and FF Nuvo (lowercase a, d, n), pointed out by Brown (2014).

Kepler and Source Sans have even color while News Gothic does not (Brown 2014, Brown 2018).

Notice that a body-text typeface requires to strike a balance between legibility and no distraction. Legibility at small sizes requires a distinctive shape of each letter. But too much distinctiveness becomes distraction from reading.

#4 The reader gets visual stimulus just enough to keep on reading

A typeface should not distract the reader from reading, but it should also help the reader to keep on reading by providing visual stimulus.

For this purpose, we need two things:

  1. Medium contrast
  2. Active texture

For medium contrast, see Truong (2016) (under the heading of “Contrast”). For active texture, see Brown (2014)(under the heading of “Active texture”). I cannot explain any better.

Note that medium contrast is desirable because too much contrast breaks the quality #1 (legibility) while too little contrast kills the quality #4.

Also note that part of “active texture” depends on medium contrast. But it appears to me that there is something more for texture to be “active”.

9 desirable characteristics of a body-text typeface

Since some typeface characteristics appear more than once in the above, let me wrap up with the list of the desirable characteristics for a body-text typeface. There are 9 in total:

  1. Generous (but not too high) x-height (for #1 and #2)
  2. Open apertures (for #1)
  3. Clear terminals (for #1)
  4. Distinguishable ascenders and descenders (for #1)
  5. Medium contrast (for #1 and #4)
  6. Even spacing (for #2)
  7. Few frills (for #3)
  8. Even color (for #3)
  9. Active texture (for #4)

The above can be a good checklist to use after we choose a typeface that feels “right” (in line with the design concept, etc.). If the typeface fails to satisfy any of these 10 characteristics, there has to be a good reason why we still want to use this typeface. For example, Garamond doesn’t satisfy the condition of generous x-height. Unless a classic Roman type is particularly essential for your design, Garamond shouldn’t be your choice for body text.

--

--

--

A virtual web dev conference held in Kyoto, with a former academic researcher using his “literature review” skill to collect scattered pieces of knowledge on web development into a logical, easy-to-understand document.

Recommended from Medium

Designing a one of a kind meeting table

Ironhack’s challenge 3: Usability Evaluation and Site Redesign

.size_table_start table,.size_table_start

Let It Fly! Reimagining Virgin Atlantic’s flying experience

Are design variables prioritizing user experience on websites?

Scratching an itch

23.09.2021

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
MasaKudamatsu

MasaKudamatsu

Designer-developer of Triangulum Color Picker (https://triangulum.netlify.app/) and Line-height Picker (https://line-height-picker.app/).

More from Medium

How Animation Has Changed in Web Design Overtime

How to Design Custom Slack Emojis Using Canva

5 Secrets to creating an awesome UI/UX

How to Design a Social Media App: A Step-by-step Guide