Picking the perfect font is never easy. And when your choice could make the difference between a delightful, easy-to-use interface and the new app everybody loves to hate, it only becomes more challenging. Here’s how to pick the right face for your users.Picking the right font for a user interface poses some unique challenges.
You’re looking for a real workhorse typeface. A font that performs well across contexts and devices. A face that looks just as pretty set at 72px as it does at 10px. A font that has easily distinguishable capital Is and lowercase Ls.
With that in mind, here’s what to look for in a font for your UI.
1. Generous x-height
In typography, x-height measures the distance between the baseline (the imaginary line most letters “sit” on) and the mean height of lowercase letters when you ignore ascenders like the top of the H and T.
Why look at your font’s x-height? Because larger x-heights tend to translate to easier legibility when set at small sizes.
In interface design, you rarely have space for a lot of large-set text, so typesetting is all about striking a balance between text size and legibility. A font with a generous x-height will let you go smaller without becoming illegible.
2. Easily distinguishable letterforms
It really wasn’t designed for small sizes on screens. Words like milliliter can be very difficult to decipher. If you ever had to read or write a password with 1, i, l or I, you know the problem.
–Erik Spiekerman on the difficulties of using Helvetica in user interfaces
Alphabets enable an astounding range of expression with a very small set of graphical elements. That’s amazing — but the unfortunate side effect is that some letterforms are very easy to confuse, especially when they’re set at smaller sizes.
Here are the most common culprits for letterform confusion:
- a c e o (that’s A, C, E, and O)
- Il1 (capital I, lowercase L, and the number 1)
- O0 (capital O and zero)
This problem can be particularly pronounced in geometric fonts (like Futura, Avenir, Circular, etc.) so think carefully before choosing one of those for your UI.
Next time you’re evaluating UI typefaces, be sure to compare these letters to see how easy they are to distinguish.
3. Full family flexibility
This isn’t necessarily a must-have — you can design an entire UI with one font — but it’s incredibly useful to have a variety of weights and styles at your disposal. Type designers realized long ago that certain design variations worked better at large sizes than small, and vice versa, which is why you’ll see variant styles of a font like display, caption, condensed,etc.
So if your UI will include a variety of content types such as labels, help text, captions, and headlines, it’ll be incredibly useful for your font to support all those different sorts of text. It’s a bonus both for other designers on your teams and for your customers, as it allows you to use type expressively without risking a loss of cohesion in your designs.
4. Brand alignment
Finally, and very importantly, you want to make sure your UI font aligns with your site’s overall brand.
If you’re all about quirky, fun content, an eccentric font might be just the thing — just remember that quirky letterforms can be suboptimal in user interfaces. But if you’re gunning for the respectability of a New York Times, you’re going to want to go serif all the way. Unless, of course, you’re trying to reinvent the concept of news — in which case, go ahead and get sans-y with it!
You can usually get a strong sense of a font’s “brand” and how it relates to your site’s brand with just a look. But you don’t want to limit this evaluation to yourself: because your response to a font is subjective, you’ll want to ask others how they respond to your potential choices.
What are your favorite UI fonts?
We’d love to hear what your favorite UI fonts are — and why. So let us know in the comments!