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.
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.
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.
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
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.
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.
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.
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.
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.
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.
(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”.
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.