THE CONTESTANTS
In order to really understand what makes a good UI and screen-ready typeface, it’s best to start with what’s already out there, right now, and what is getting used.
The “Segoe” range of fonts used by Microsoft first saw the light on theirWindows Vista OS and developed further for Windows 7 and the currently in-production Windows 8. Segoe UI was met with controversy as many type designers pointed out the similarities it held with the more world-famous
Frutiger.
“Lucida Grande” is the UI typeface of choice for Apple’s Mac OS X. Eerily based on
Lucida Sans and Lucida Sans Unicode by Charles Bigelow and Kris Holmes, Lucida Grande was further optimised for smaller point sizes and screen legibility. Strangely, Lucida Grande has never included italics.
The “Ubuntu” typeface was developed by
Dalton Maag for, yes, the Ubuntu Linux OS. It was made fully public in late 2010 where it has
enjoyed huge popularity, not only on the Ubuntu OS itself, but also via the
Google Web Fonts directory.
Though “Helvetica Neue” itself has been around
since the 1980s, it was only in 2007 with the release of Apple’s first iPhone that it became widely associated as Apple’s UI typeface of choice for iOS.
Developed by Steve Matteson of
Ascender Corporation, “Droid Sans” is currently used on Google’s Android smartphone OS. It has been specifically developed for small screen legibility and is part of the greater Droid font family that also includes Droid Serif, and Droid Mono.
THE TESTS
When looking at typefaces for UI design and screen legibility, there are a few factors we need to consider: a lack of ambiguity, a good reading rhythm and large x-height.
LACK OF AMBIGUITY
So, what do I mean by a lack of ambiguity?
Typefaces that are being used for User Interfaces and on-screen reading are typically going to be small, say around 9-12 points only. Not only that, you have to factor the pixel density of your typical monitor. Granted, more modern smartphones are making excellent inroads into greater pixel density (the iPhone 4s, as an example, features 326 ppi), but such devices are still largely a minority in a world full to the brim of Windows PCs, Mac towers and laptops and more.
This means, with small point sizes and little pixel density, the individual shape of the letters of a typeface have to be clear and easily distinguishable from each other.
Here’s one way we can demonstrate this:
This is the word “Illiterate” (capital I), set in the above five typefaces. A good UI typeface should demonstrate distinctive letterforms so that they don’t get confused with each other. A common typographic problem is how to handle the capital I and the lower case l (“L”). Especially in a word like this, if you’re not careful problems can occur.
It’s interesting to see how each typeface above handles the problem. BothSegoe UI and Droid Sans differentiate between the two letters by giving the capital I little “serifs”, top and bottom. The Ubuntu typeface uses a different solution, giving the lowercase L little tails.
Unfortunately, both Lucida Grande and Helvetica Neue fare poorly in this test, the latter more so. Lucida Grande at least features slightly taller lowercase L‘s, but as you can see—at smaller point sizes—this difference is negligible. Poor Helvetica Neue, famous for its highly machined and calculated letterforms, sees almost no visible difference between the two letters.
It may seem almost trivial when studying minute details such as these. But when reading a piece of copy, or scanning through a UI dropdown list of some sort, letterform clarity is massively important. It enables us to read through text much easier. Seeing “Illiterate” in Helvetica Neue at a small size may only cause our brains to pause for a fraction of a second as it attempts to decipher the word shape, but when you multiply this across multiple instances and other similar letter combinations, this builds up into a harder, less pleasurable reading experience.
Another test? OK:
This time, the word “anagogy”, set in the above five typefaces (incidentally, the word means “The spiritual or mystical interpretation of a word or passage beyond the literal, allegorical or moral sense”).
What we’re examining this time round is how each typeface handles the juxtaposition of letters with
descenders as well as the similar rounded shape of each letter in this word.
Thankfully, every typeface here passes the first test, which is to use a double-storey a; it also demonstrates why geometric sans-serif typefaces make for a poorer reading experience (click
here to check out ITC Avant Garde Gothic on MyFonts. Type in “a doggy” and decrease the point size. You’ll see what I mean). A double-storey lowercase a differentiates itself from the lowercase o.
Another typographical problem to consider here is the juxtaposition of letters with descenders, such as the lowercase g and y. At smaller sizes, most of these typefaces struggle a little with the descenders clashing into each other. Lucida Grande attempts to address this by using a straight descender for the y. Droid Sans wins this round by utilising a double-storey g.
With this word, we’re also looking at the general shape of each letter. You’ll note in Helvetica Neue, for example, that each letter features a consistently rounded shape. It’s one of the more celebrated aspects of the typeface, but for the purposes of screen reading and UI design at smaller point sizes, separating each letter becomes trickier as each letter seems the same overall shape (Helvetica Neue’s single-storey g doesn’t help it against the lowercase o). This will always be a problem for Helvetica; as a grotesque style sans-serif, it was originally designed for much larger display purposes, and with great success. At smaller sizes for copy and UI, its like fitting a cube into a round hole. Helvetica was just never designed for lots of small text.
Segoe UI suffers from the same problem, though to a lesser extent. As bothLucida Grande and Ubuntu are more
humanist in style, they fare better at smaller sizes, especially with Ubuntu’s cropped off counter on the lowercase g. Droid Sans takes this round again; by utilising the double-storey lowercase g it makes the letter that much more unique when set against the others, resulting in greater separation of letterforms and a clearer reading experience.
GOOD READING RHYTHM
Our second factor to consider for a good UI and screen-legible typeface is that it needs a good reading rhythm. What do I mean by that?
For this, I feel I should point you to Ludwig Übele, the designer behind the beautifully readable
FF Tundra typeface. In this article on I Love Typography, Ludwig
notes:
[...]I chose Tundra as the name for my new serif typeface not during the design process, but from the outset. I had in mind this idea of a wide and flat landscape. This was the initial idea: Tundra should lead the eye effortlessly along the line, thus emphasizing the horizontal.
A typeface has two principle directions: The horizontal, the line, which the eye moves along; and the vertical of the individual characters, defined predominantly by the stems. The stems are responsible for the rhythm of a typeface, while the curves (bowls, instrokes, outstrokes, etc) determine its character. In general, the narrower a typeface becomes, the less distinctive it is. A narrow typeface creates a picket fence or staccato effect, a line dominated by closely spaced stems. This is tiring and dull, and does not make for easy reading. The same occurs when the distances between the stems is too generous.
In short, the horizontal aspects of a typeface lead the eye along the line, whilst the vertical aspects create the rhythm; the points along a piece of text that makes the eye stop to decipher a new letter/word shape. As noted by Ludwig, a typeface that is too narrow creates a “picket-fence” effect that tires the eye; conversely a wider typeface creates the same problem as the stems are often too far apart.
A good UI typeface, then, needs to optimal balance between too narrow and too wide, helping to lead the eye along with strong strokes along the two horizontal lines (the baseline and x-height) and punctuating optimally with stems.
Click for full-size
So here’s our five typefaces with some dummy lorem ipsum text. Click the link above for the slightly bigger image. Scan the text a little bit.
What are your thoughts?
One that immediately springs to mind is that, once again, Helvetica Neue suffers here. Not only is it a fairly wide typeface—making the distance between each stem greater—but it feels very monotone; each letter shape exhibits the same roundedness throughout. It almost feels like a monospaced typeface, where every letter is exactly the same width. In that sense, Helvetica Neue has a poor reading rhythm, there’s simply not enough variation.
The other four typefaces fair better with their similarly narrower letter widths and more humanist style. I like how Ubuntu guides the eye along the horizontal lines with the little tails on the lowercase L and the half crossbar on the lower t. Segoe UI features much more open counters than the other typefaces, given certain letters like o, b, d, g and p a little space to breathe and vary the rhythm. Lucida Grande’s lowercase a has a longer tail off the stem that guides nicely onto other letters. Droid Sans also demonstrates a good reading rhythm, especially with its serif-style lowercase t.
LARGE X-HEIGHT
The x-height of the typeface is simply that: the height of a lowercase x. It is used a measurement of how the height of the lowercase letters compare against their uppercase buddies.
As mentioned before, typically UI and screen-legible typefaces have to perform on monitor screens with little pixel density. We don’t have many pixels to work with, so we have to make them count. That means that larger x-heights open up the letters, giving their counters and bowls more space to breathe, making them more distinguishable and, therefore, readable.
Click here for the full-size image.
The image shows each typeface, levelled along the baseline with their x-heights and cap heights compared. The x-height line given here is Droid Sans, which boasts the largest x-height. There’s not much in it, though.
Both Segoe UI and Helvetica Neue feature the smaller x-height sizes withLucida Grande and Ubuntu marginally smaller than Droid Sans. Of course, at lower point sizes on-screen, this effect is magnified as each letter of each typeface gets crammed into less and less pixels.
SO, WHO’S THE WINNER?
Consistently, Droid Sans performs the best out of the five selected and it’s no wonder: it has been specifically designed from the ground up as a UI-ready and small screen legible typeface. Also of note is Helvetica Neue, as a dedicated UI typeface it just doesn’t work. Each individual character is too similar in shape that also results in character ambiguity and it’s a fairly wide typeface. As mentioned before, Helvetica was never designed for body copy or UI; it needs to be used at much larger sizes for headers and general display purposes, that’s where it shines. At smaller sizes, it struggles. Why did Apple choose it as their UI typeface for iOS? I would guess that they went for form over function for this one. Personally, I feel Lucida Grandewould work rather nicely on iOS.
Segoe UI, Lucida Grande and Ubuntu all make excellent choices for UI but in different ways. Ubuntu features a more monolinear stroke width, solves the lowercase L and uppercase I pairing problem well, but I would’ve like to have seen a double-storey lowercase g. Lucida Grande has an excellent reading rhythm but suffers with character ambiguity, especially the L andI pairing mentioned before. Segoe UI boasts lovely open counters and bowls for good rhythm and uses serifs on the uppercase I for that tricky pairing problem.
MY RECOMMENDATIONS
These aren’t, of course, the only good UI and screen-legible typefaces out there. So here’s a couple more that I personally feel perform well and that, perhaps most importantly, I like the look of.
I’ve featured
Aller Sans before, and with good reason. It is an excellent UI and screen-legible typeface. It boasts many characteristics of Ubuntu (this is unsurprising, both Aller and Ubuntu were designed by Dalton Maag): the monolinear stroke width, the tailless lowercase a, the added tail in the lowercase l and the large x-height. However, Aller adds into the mix a double-storey lowercase g, a strange uppercase Q and a full crossbar on the lowercase t.
You can download Aller Sans for free here.
This is Azuro, designed by
Georg Seifert, mastered by Jens Kutilek and distributed on the
FontShop. This typeface has received extensive work and it shows. If you really want to, here you can
read about the development of this typeface. It has been tested thoroughly on Windows, Mac OS X and iOS, tweaked, kerned, and throughly mastered. I love the serifs on the lowercase l, that tail on the uppercase Q and the old-style numerals. Featuring slightly narrower letter widths and proper italics, it feels distinctly German somehow. In any case, I highly recommend it.
You can purchase the desktop and web versions of this typeface here.
Initially released in 2009, PT Sans was designed by Alexandra Korolkova, Olga Umpeleva and Vladimir Yefimov for ParaType and made freely available under an Open User License. Like most good UI and screen-legible typefaces, PT Sans is slightly narrow with humanist tendencies, shows good descender differentiation between the lowercase g, j and y and thankfully boasts a massive library of unicode and language support. Not entirely sure about that uppercase Q though. Furthermore, PT Sans was extended to include PT Sans Caption, PT Sans Narrow as well as a serif version, PT Serif.
Article Credit
