What Should I Look For In a UI Typeface?

What makes a good UI typeface?

I’ve touched briefly before on some typefaces that I consider to be particularly good for on-screen reading. But now I wish to delve further into this realm of typography and consider: What makes a typeface good for screens and UI design in particular?

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.

Segoe UI - as seen on Windows Vista & Windows 7

The “Segoe” range of fonts used by Microsoft first saw the light on their Windows 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 - as used on Mac OS X

“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 - as used on Ubuntu

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.

Helvetica Neue - as used on iOS

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.

Droid Sans - as used on Google's Android

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:

Testing character ambiguity

Comparing typeface ambiguity - monchrome

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. Both Segoe 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:

Letterform clarity test number two

Comparing typeface ambiguity - monochrome

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 both Lucida 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.

Testing the reading rhythm of our five typefaces

Click for full-size


Comparing reading rhythm - monochrome

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.

Comparing x-heights

Click here for the full-size image.

Comparing typeface x-height - monochrome

Click here for 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 with Lucida 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 Grande would 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 and I 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.

Aller Sans by Dalton Maag

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.

The Azuro typeface

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.

PT Sans, by ParaType

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.

You can download PT Sans for free here.

Your Thoughts & Recommendations?

How do you feel about the test five typefaces above? Have any other preferences? Are there areas of consideration for UI and screen-ready typefaces that you feel I haven’t touched upon? The comments section below was made for you.

Update 1:

Wow. I never imagined that this humble thought-ramble of a post of mine would receive so much attention. Thank you everyone for your intelligent thoughts, opinions and critique, it’s really appreciated and definitely something I encourage and enjoy!

A few pointers that I’ve mentioned in the comments:


Hex, I find the body copy of your site way too small and hard to read.

I agree. Currently I’m using Khoi Vinh’s excellent Basic Maths WP theme for my site. Structured grids and typographically influenced. Can’t get enough of that style. But I’m aware the body point size is too small. Thing is, my web design/development skills are minimal and I don’t want to change the body point size and ruin the measure and grid system of the entire site, y’know? So I am in the midst of looking for a new WP theme that is similarly gridded and typographically influenced but with a bigger point size.


Hex, radial gradients on images comparing typeface legibility? Please…

Fair point indeed. I’ve now included monochrome images.


Hex, something you’ve not discussed that is really important is the different font rendering of each OS.

As mentioned in the comments, I totally agree that font rendering—in itself—is vitally important when any discussion of UI typefaces occurs. In fact, it’s such an important and large topic it could very well take up a post of its own! But there are already plenty of excellent posts out there that discuss this topic, that I don’t feel the need to add to it. Suffice to say, I do understand the importance of font rendering for UI typefaces, but wanted to focus more on the actual typefaces themselves for the purposes of this article.

Ian Hex aka Izo

Logo & Identity Design

If you liked this post, feel free to share with the buttons below!


12 Comments so far. Comments are closed.
  1. Walt,

    Quite interesting. I’m no expert on fonts and typesetting, but I plan to spend time this weekend comparing your other suggested fonts with the same examples.

    One thing you didn’t mention was the interaction between spectacles, screen fonts. the colors chosen for the display, and the LCD. The chromatic abberation of corrective lenses is often ignored and I’m not sure how someone with good eyesight can experience what it’s like. My correction is -11 diopters with -2 astigmatism. The higher wavelength colors (red end of the spectrum) bend through any lens much more than shorter wavelengths and the higher the lens power the worse the effectis. Add in the polarization of the LCD and you get quite a witch’s brew of text.

    I like the Android Sans for the reasons you pointed out (I refuse to use smartphones, so I’d never really noticed it before), but the smaller font sizes are all but unreadable unless my eyes are pointing directly at the text. This may not be as much of a problem for a smartphone, but it’s a deal stopper on a tablet. If one is actually reading the eyse scan scross the text. The larger the LCD, the harder it is to read.

    That said, I use an e-ink Kindle (when I don’t have a real book in my hands) because I find it ipossible to read an LCD for any length of time. When working at a computer I find myself waggin my head to and fro to read across the screen.

  2. Jim Birch,

    I find the upper-i/lower-L problem particularly pernicious, not just in terms of readability but also because the letters are actually indistinguishable at some times when they need to be: technical situations, part numbers, and so on, where there is no deciphering context.

    Mr Helvetica got it really wrong.

  3. tom,

    Why use Lorem Ipsum in the paragraph test… i cant read it to see if it creates good rhythm. why not get the text from here http://www.gutenberg.org/ … I get using it when doing layout design but when talking about reading rhythm Lorem Ipsum in my opinion makes no sense, all i can tell is it looks nice as i gloss over it — now how well i can read it.

    • Izo,

      Hi Tom, thanks for the comment. Using Lorem Ipsum “defamiliarises” the readers perception of the text; something that affects legibility studies is our present familiarity with the language in question. By using non-familiar dog-Latin, the readability of a text is stripped down to the capacities of the typeface itself, without our brains being able to “guess” a word due to familiarity.

  4. Bruce,

    Numbers 6, 9, 8 should be easy to tell apart. When the curl in a number 6 or number 9 curls too much, and my eyes are tired, it is hard to distinguish those numbers from number 8. In an ideal font for practical purposes, there should be no curl at all for 6 or 9. Ubuntu is best. Helvetica is worst. What makes me angry is the extent to which invoices, in which the numbers are very important, use fonts that curl the tail of 6 or 9 excessively.

    • Bruce,

      I would like to revise my comment regarding numbers 6, 9, 8. PT Sans is better than Ubuntu.

    • Izo,

      Hi Bruce, thanks for the comment. =] It’s generally a trait of Helvetica, really, that terminals finish at horizontal flat lines, resulting in closed counters and bowls (in fact you create nearly 180° worth of a circle in doing this). Fine for large sizes, not so good for smaller ones.

  5. Olie,

    Nothing earth-shattering, but I found it funny that Droid Sans (as in “Sans Serif”) solves the I-l problem by adding serifs. Made me think it should be called “Droid Mostly-Sans” :)

  6. Rory,

    Augh I ADORE Ubuntu as a display font. It’s even the system font on my phone. Maybe it’s just my inner open-source nerd here but goodness it’s nice.

  7. sams,


    Thank you four your nice writing on The Contestants


  8. Covarr,

    Some of the problems present in Segoe UI are alleviated in Segoe WP, a variation designed for Windows Phone 7.


    MS’s fairly strict adherence to the pixel grid gives them a bit of a readability advantage at small sizes, but it also gives Segoe UI a huge advantage because of its very good hinting. As a general rule, as you decrease your font size, Helvetica Neue is going to start looking blurry sooner than Segoe UI (I don’t have enough experience with the others to speak for them).

    Personally, I’m a big fan of bitmap fonts at really small sizes. Think back to 2001, to the first iPods. Even on those tiny, low-resolution screens, Chicago was extremely readable. It was never the prettiest, but it worked well.

    Of course, all of this depends on the assumption that the font designer is targeting multiple displays, because he can’t be sure what the user will have. Sure, Segoe UI works really well with ClearType on a standard LCD (because it was specifically designed for it), but I don’t doubt that some effort was made to ensure it would also look good on a sideways LCD, a CRT, or a less sophisticated font-smoothing engine, possibly at the expense of better hinting/smoothing on a standard, properly-oriented LCD. If Steve Matteson had been able to design EXCLUSIVELY for a single display and rendering engine (such as most handheld game consoles) it might have had even better smoothing, and been even more readable at small sizes.

    I can’t think of anything else to rant about, so I guess I’ll end with a fun fact: Droid Sans and Segoe UI were both designed by the same guy, similar to Ubuntu Sans and Aller Sans

  9. Thank you very much for this interesting and detailed article! I like Segoe UI very much and also use it for my websites where available. Other fallback fonts are Droid Sans and Lucida Grande, so that every platform gets its default font.

    Unfortunately, Microsoft has changed the Segoe UI font with Windows 8 (as of Release Preview) so that the capital I doesn’t have serifs anymore. Now the capital I and lower L look pretty much the same, if not identical. I always liked fonts with a serif capital I because I can easily distinguish those characters. This story has now come to an end with Windows 8. If only they had changed the lower L as well. Let’s hope for the final release.

    I will take a closer look at your recommendation Aller Sans to use it on my websites, for all platforms.


21 pings so far. Trackbacks are closed.