Use Typecast to design for the reader by putting type first. Try it now

As of January 1, 2018, we are no longer providing support for Typecast. Our apologies for the inconvenience. Thank you.
« Back to Blog

5 Faces for UI Design

on Wednesday 14th of August 2013

Interface elements are about task completion. Our labels and CTAs get visitors from their arrival point to where they want to be, so that text needs to be as readable as possible. Today, our friend Dan Eden presents five faces to help you get the job done.

Here I’ve pulled together five useful typefaces for user interface design, which I’ve mocked up in a simple screen for an imaginary smartphone application that I’ve called Righter. For something like this, I’d want a typeface with a friendly personality, but nothing too silly. You can click on the typeface names to try styling each for free in Typecast, or click the images to see a live demo of my picks side-by-side.

Avenir Next

Avenir Next typeface set in an app interface

First up, it’s the Avenir Next typeface. This was somewhat popularized as a UI typeface when Apple used it in their maps application. I like it because it has plenty of character (no pun intended) and is readable when set small. It’s also available in a pretty vast number of weights, so fine-tuning for readability at all sizes is a simple task.

Try styling Avenir Next.

Proxima Nova

Proxima Nova typeface set in app interface

The Proxima Nova family has been doing the rounds on the web for a long time now, and for good reason – functional and friendly, it’s like Helvetica let its hair down. It comes in fewer weights than Avenir Next but has a taller x-height, making it more suitable for small text.

Try styling Proxima Nova.

Alright Sans

Alright Sans typeface set in app

Arguably the most functional of my selection, the Alright Sans typeface features the dynamic terminals of Proxima Nova’s “e, a,” and “t”, along with an x-height as generous as Helvetica’s. It also flaunts some distinguishing features in its letterforms: specifically the upturned terminal on the lowercase “a”.

Verdana Pro Condensed

Verdana Pro Condensed typeface set in app

Designed for screen devices, this typeface has a lot of features to help prevent ambiguity – for example its lowercase “c” has a nice, wide aperture, ensuring there’s little confusion between “c” and “o”. The widths of Verdana Pro’s capital letters are also organically formed rather than fitting to a specific grid, making a font that has a much more natural reading rhythm.

Try styling Verdana Pro.

Droid Sans

Droid Sans typeface set in app

Droid Sans was commissioned by Google to serve as the stock font for their Android mobile operating system. It’s a good example of an interface typeface that is highly readable, yet not lacking in personality and voice. Designed specifically for small-screen use, it’s ideal for interface design.

Try styling Droid Sans.

Making my choices

A number of properties influence the overall readability of text, but the ones I tend to watch out for when choosing typefaces for UI are x-height, legibility, and character ambiguity.

Close up look at serif v sans serif strokes

Serifed typefaces (like Hoeffler Text here on the left) tend to include very fine strokes, which can disappear at small sizes, while sans serifs (like Neue Helvetica on the right) tend to be built with even strokes

All of my picks are sans serifs because I feel they’re better suited to the task of user interface design. One reason is that (most of the time) their vertical and horizontal stems are consistent in thickness, making them considerably easier to read when small.

Comparing x-height of two typefaces

Although set to the same size, the x-height of the Hoeffler Text typeface is much smaller than Neue Helvetica

They also tend to have taller x-heights: that is, the vertical size of a lowercase “x” in comparison to the vertical size of an uppercase letter. Generally speaking, a taller x-height means increased readability.

I also look for ambiguity between the number “1”, capital “i” and lowercase “l” as well as between the lowercase “a”, “e” and “o”.  So the copy “1 Ill ocean” works well to test these characters.

Specimen of Europa and Gill Sans typefaces

Europa and Gill Sans typefaces don’t perform well in the 1Ill ocean test

As you can see, with the Europa and Gill Sans typefaces, there’s almost no difference whatsoever between the capital “i” and lowercase “l”, and on Gills Sans, the number “1” is indistinguishable from the capital “i”. This could cause some trouble in an interface, especially at small sizes.

Specimen of Verdana Pro Condensed and Droid Sans

Serifs on a few problematic letterforms make Verdana Pro Condensed and Droid Sans highly legible

(Compare that to the clarity of Verdana Pro Condensed and Droid Sans, both of which avoid that ambiguity by adding serifs to their capital ‘i’ and 1.)

The double-story “a” in Europa and Gill Sans helps us tell the “a”, “e” and “o” apart at even at 16 pixels, but on Europa, the aperture of the lowercase “c” –  where the two terminals of the letter meet – is quite small, making it hard to distinguish from the lowercase “o”.

Hopefully this will help you recognize the characteristics of a good UI typeface, ‘test’ new faces you encounter, or at least give you a few fallback options to try in your own designs.

For more web font recommendations, check out our Type on Screen collection. Big thanks goes to our guest author Dan Eden for writing today’s post. For more from him, check out his blog. Guest authors are paid for their contribution, and all opinions are their own.

Type on Screen

Get more web type tips, interviews and design gems by email

Hook me up!


blog comments powered by Disqus