How to pick the right UI font

How to pick the right UI font

Find out how to pick fonts for your user interfaces that aren’t just beautiful, but also improve your websites’ usability.

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 font for your users.

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.

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.

Easily distinguishable letterforms

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)

Overall readability

It’s also important to take a step back from individual letterforms and consider the overall readability of a font at the word level. With a good UI font, you should be able to effortlessly distinguish words.

Comparing Brush Script MT and Source Sans Pro, it’s easy to see that the script font’s complex letterforms require more time and effort to decipher than the sans serif’s relatively simple forms. This comparison also highlights the already-mentioned value of a large x-height — believe it or not, both fonts are set at the same size, yet Source sans looks huge in comparison.

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 displaycaption, condensed etc.

Fitness for your purpose

Many fonts were designed with a particular usage in mind, so it pays to pick a font built to fit your site’s purpose.

For example, sans-serifs have practically become the go-to for task-focused user interfaces. But if you’re building an app focused on reading, you might want to go with a serif typeface instead, as long association has made that font classification the standard. In that same vein, if you’re building a news site, you’ll probably want to pick a serif face with headline, caption, and body copy variants — and maybe a sans-serif family member for UI and metadata elements.

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!

Share this post

Leave a Reply

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