Typography

How to pick a Typeface for User Interface and App Design?

What should you pay attention to when choosing a font for your user interface or app? In this article and video I cover what to look for. I also pick on Hellvetica (yes, Hell-vetica) so you won’t pick it as a typeface for your functional text.

TL;DR: For your UI or app select a typeface with clean distinctive characters (Il1 test), open shapes, little contrast, and set it legible, so it works in tiny sizes.

User interface text is functional text

The term functional text summarizes everything that’s not display or body text. It’s short text that serves a specific purpose and might be mostly applied in a user interface or app design. You might find it in:

  • Labels
  • Alerts
  • Navigational element
  • Captions, and so on.
If you’re designing an app you will most likely focus on functional text

It is mostly used in small sizes, so in 10 to 12 px it still should be readable. But how can you be sure the typeface you chose fits these circumstances and your app or UI will perform great?

Go for clear distinctions

Clarity is key. Functional text is not long reading text, so context might be different or missing. The typography of your labels or the caption of charts should leave no room for interpretation. To assure that your typeface works well do the Il1 test (capital I, lower case l, and the number one). If these three shapes are easy to distinguish you found a good typeface.

Gill Sans on the left has the same shape for the uppercase I, lower case l and the number 1. Fira Sans in the middle is clearer and with Recursive on the right side it is obvious what shape is what character. Btw: Basic Sans, the typeface for this caption, is not ideal for the Il1 test either, as you can see here 😉

Look for open shapes

The apertures, these are the openings between the counter and the outside of the letter, should be open. This makes them easier to read in small sizes. In the example below you see that Helvetica as very closed apertures compared to PT Sans on the right side.

Helvetica on the left vs. PT Sans on the right. Helvetica’s apertures are closed which makes it harder to read in small sizes compared to PT Sans.

This is the major reason why it was a horrible decision to use Helvetica as the UI font for Mac OS 10.10 Yosemite back in 2014. Luckily it got replaced by SF Pro.

Helvetica vs. Lucida Grande in Mac OS 10.10 Yosemite. Helvetica is harder to read and gets blurred, especially on low resolution monitors. Image taken by Typografie.info

Little contrast is better

Look for typeface with even, sturdy strokes. This does not necessarily mean it has to be a sans-serif (some subtle slab serifs could work as well), but in most cases it might be.

Typographic power to your inbox!

  • FontFriday: I personally recommend one typeface per week and for what application it’s best. Every second week, it’s a free font.
  • Pimp my Type: Articles & videos from the YouTube channel that help you improve the design of your website, app or digital product.
  • No Comic Sans, Open Sans 😉 or any other BS, like annoying ads.

Set things legible

Letters set in all caps are harder to read, since they create less distinct letter shapes. When there are no ascenders and descenders the outer shape of a word is always a long rectangle. The menu in Half-Life: Alyx VR gives you typographically the same shivers down your spine like the game play. It’s incredible hard to read making it extra horrific to pick something.

The Menu in  Half-Life Alyx VR shows two levels, the text ist set in capital letters in tiny sizes on a noisy background and extremely hard to read
The typography of Half-Life: Alys VR gives you nausea. The tiny type sizes and noisy background makes it extremely hard to read. Especially with a VR headset.

After display text and body text, this was the third part of my three part series about how to choose a proper typeface. I also cover why your font choice matters and gave a primer on the 3 different kinds of text. Any feedback or suggestions for future topics? Happy to read them in the comments below!

2 Comments

  1. Also note that fonts like SF Pro support accessibility out of the box and do dynamic type based on the user’s accessibility setting. Can’t stress enough how important this is getting, with seniors increasing font size on their iOS devices. It does mean you’ll somewhat be limited to certain system fonts, but for apps in which usability > branding, this shouldn’t be an issue. 🙂

    1. Thank you for this comment, Robert! I absolutely agree, dynamic type is a great feature, not only for a11y, also for readers over all. It’s on my list to dig into this topic and how to deal with it with custom typography. If you have to replace or rebuild the dynamic type functionality for the selected typeface.

Leave a Reply

Your email address will not be published. Required fields are marked *