How to pick perfect UI font

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.

Image result for Generous x-height

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.

‍Visual distinction between the capital I, lowercase L, and the number 1 are key for any good UI font. Hence, Helvetica’s less-than-stellar rep in UIs.

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

Image result for font family pt sans

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!

Advertisements

Author: Mahavir Rathod

Technical head at All web vision. Professional web designer, Web technology geek.

One thought on “How to pick perfect UI font”

  1. I’ll immediiately snatch yoour rrss feed as I can not fin yor e-mail subscriptioln link oor newslette
    service. Do yoou havbe any? Kijdly allow mee recognise
    soo thhat I mayy jus subscribe. Thanks. I am sure tyis paragraqph hhas toucheed aall tthe intewrnet users, itts reallly really fastidious post onn building upp
    neww webpage. Greetings! Verry helpful advfice within this article!
    It iis thhe little chanbes that willl mwke the larest changes.
    Thanbks foor sharing!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s