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!

Comments

90 Comments so far. Leave a comment below.
  1. A smashing post. I’d say that the android typeface is fucking horrible, though I see your rationale that it is in many ways the most appropriate to the circumstances.

    I find my HelveticaPhone relentlessly unambiguous and unbaffling. The same is true for my mac.

    I get the rationale (I think), but can you give me an example of a word that commonly features in a UI that has ambiguous characters?

    Is it possible that some of these tests are irrelevant in UI.

    I imagine that apple don’t care about those factors so much as things like “does it look… apple-ish?”

    • Izo,

      Thanks, Dave! =] Regarding Helvetica, if I’m using an iPhone app that renders a lot of text—say Tweetbot or Reeder—both use Helvetica Neue and both I find trickier to read. I’ve tested this on my own machine, changing the default UI typeface to Helvetica Neue. It’s definitely harder; nearly every character of Helvetica Neue is mapped on the same curvature and width, there’s very little variation to create good a good reading rhythm. This then, of course, makes things even trickier for those with impaired vision.

  2. May I ask, what are the typefaces used on the Kindle and also for these comments/this blog?

    I’m totally not “into” fonts, really… I just know what I can read. I can read Reeder, no problem (more on iPad than iPhone). I was able to read this blog no problem on a computer screen, from the site itself. I can read my kindle, but I’d change the typeface if I could. I never struggle to read anything from my iPhone. I find other people’s Android phones unbearable.

    I wonder if your iPhone is serving things up differently to mine. Apple’s push towards “retina” (ludicrous term) makes my iPhone feel sufficiently “like print” that it feels okay to push the “screen readability” rules. Sorry for all the quotes!

    • Izo,

      This blog is set in Droid Serif. =] Not being an owner of any kind of Kindle, I couldn’t say what typeface is used by default.

      It’s curious you should Android’s Droid Serif unbearable, whilst I find it a delight to see, read and use. What do you not like about it?

      Also, as my poor old iPhone is a 3G model, that obviously means a lower PPI than what is featured in the iPhone 4(S). But even with greater PPI and a more “print-like” quality to the typography, I would still be tempted to use a different typeface, largely to aid those of poorer vision, which should always be a consideration in UI design.

  3. Great article, awesome detail and argumentation.

    As far as I’m concerned, Droid Sans is something I always use (on small screens or large) because it’s extremely easy to read and uses screen real estate really really well.I never liked the Apple look mainly because I feel it makes every word harder to read at a glance… I tried them out briefly but when writing they felt like I’m trying to fit a novel in an SMS.
    The Ubuntu and Segoe font are improvements for their respective platforms and look great in titles and headlines, but feel like they are better for older people that have failing eye sight. Although not as big an issue as with Helvetica and Lucida, these 2 also use up lines like crazy when used in writing.

    IMO, from an UI point of view I find Droid, Segoe and Ubuntu as best looking (will try your recommendations, because they look great) and Droid is great as an all around font… best IMO along with DejaVu.

    • Izo,

      Hi, Dorin! Thanks for the comment.

      The “at a glance” word recognition is definitely important, I agree. And with Helvetica Neue, in bold, tightly tracked, that becomes pretty difficult.

      I do like Deja Vu; I consider a sort of evolution of Verdana, but I do not enjoy the pairing problem it has with the uppercase I and the lowercase l.

      • True and I agree, that’s why I didn’t say anything about it being a good UI font… it’s good as a general purpose font… when the human brain tends to correct the word (besides the fact upper case I is thicker than lower case l). Also, what general purpose usually means to me is monospace fonts (where the I-l issue doesn’t exist). In all fairness I use mostly (99% of the time) Droid Sans for documentation. Anyway I like DejaVu… it looks elegant and people tend not to diagonally read whatever it’s written in this font (2 papers worth of experience behind this knowledge, no one completely read the first paper written in Times New Roman).

        My father’s Galaxy S+ uses Droid Sans and it’s gorgeously readable, my fiancee’s HTC Wildfire S uses Droid Sans and it’s perfectly readable on it’s smaller screen without requiring me to scroll a lot or to take more than a second to read a headline. I even use it on my ebook reader and it’s a battery saver (no need to zoom in and thus to turn pages).

        • PS: You’re up late :) I thought I’m one of the very few insomniacs in the world (no joke there I slept less than 20 hours last week and I can consider myself oversleeping) and never thought I’ll meet another one.

  4. I think that Helvetica Neue on a really high PPI screen makes a great UI.

    I am not sure I know what I’m talking about, but is it still “UI” when it’s the main body of text in a reader like Reeder? I’d say that even if it’s not the most appropriate typeface for reading 300 words in, it seems perfect for tapping on to select something as clear as “Network” or “Bluetooth” in the settings.

    The Kindle app on the iPhone looks like this:

    … and it does seem to read easy. That said…

    … this seems perfect. All those serifs and shit would not fly for me with the other UI stuff in place.

    • Izo,

      I guess a section for reading body copy in an app is still considered a UI element, sure, but the typography for that particular element serves the purpose of being easy to read. In my opinion, Helvetica Neue makes this primary function harder than it should be.

      Serifs for UI design generally doesn’t happen and again it’s largely to do with what is normally a lack of PPI: with only the average 96 PPI to play with on your standard LCD monitor, serifs take up valuable screen estate or even obscure the letterforms on some typefaces.

  5. Addendum… I didn’t realise my images would get disabled. I guess that’s reasonable… here they are as links:

    Kindle App (iPhone)

    Reeder

    The point I’m making is that the Kindle’s “readable” font is appropriate only when the app itself disables all other UI. If Reeder had a “more readable” font, it would arguably drive people mental in the ways it clashes with the clock, buttons, title etc.

    • Izo,

      Well, if that’s the Kindle app on the iPhone it will probably use one of the pre-installed typefaces you find on an iPhone. This site provides a pretty comprehensive list of the fonts installed on an iPhone and iPad -> iOS Fonts.

      What also might interest you is Stephen Coles’ fascinating article on the FontFeed titled What the iPad is Missing (No, it’s not a camera). He provides a thoroughly in-depth look as to some of Apple’s puzzling typographical choices in recent years. Give it a good read. =]

  6. Ah, this is such a great post mate – nice in depth look into screen types

  7. interestingly, I just went for a dump and started reading this site on my phone…

    The iOS5 version of Safari now features a “Reader” button that seems to have the sole function of turning this:

    http://cl.ly/071L0D0d19111B3E3T3f

    into this:

    http://cl.ly/1F2E2z0h3O1Z0E101b2J

    I’m not sure what this means. A serif-y font on a textured background with shadows cast at top and bottom and a “Done” button in a different face at the top? Seems fucking odd to me, but I think it does read better than the original… largely because of size (maybe).

  8. hmm.

    The point I was making (badly) was that if Apple’s made (stolen) a “feature” that realises that something is “a body of text” and gives you the option of reformatting it for comfortable reading, they clearly aren’t labouring under the illusion that Helvetica Neue is the all-in-one daddy of phone typefaces.

    Furthermore, their cocky-assed assertion about how people should read your site on their phone was correct. It’s objectively easier to read in this “reader” thing than in the (albeit very nicely) optimised-for-mobile version.

    If you’re levelling the accusation that Apple’s UI font choices are weak because they don’t work for large bodies of text, this represents evidence that they know that, otherwise this “reader” thing they’ve added would be rendered in Helvetica Neue.

  9. Wow, extremely nice read! Thank you so much.
    Where did you get your info or background research from? Experience? Do you have any links to share that delves more into this subject, typography for web/screen specifcally?

    Thanks again for the greaet read!

    • Izo,

      Thanks, Jimmy! Honestly, I just read around. Lots. And have done for a long time. Check out the making of the Azuro typeface in the post above for a good start on making a great UI typeface. FontInUse also occasionally makes great posts on typeface used on the web or in UIs.

  10. Tasha Cotton,

    Great post, very interesting. I like Ubuntu the most, nice to see curly ‘l’s.

  11. Gabriel,

    Droid Sans may be practically speaking the best, but I just find it ugly. Similarly, Helvetica Neue may not be particularly functional but it looks nice, which was probably Apple’s benchmark.

    Regarding your suggestion that ubuntu would be improved by a double-storey g: when I first read that my reaction was ‘but it wouldn’t fit with the rest of the font’, but I’m beginning to reconsider that. Could you see an ubuntu-style double-storey g?

    Also Aller Sans is beautiful, but I prefer p and q to be mirror images – and I have the same problem with PT Sans.

    • Izo,

      Hi Gabriel, thanks for the comment. =] Obviously, there’s little I can do against someone’s gut preference, but I at least did want to point out—from a typographical standpoint—why Droid Sans fares well.

      I can definitely see Ubuntu using a double-storey g; you’ve only got to look at Aller Sans (both developed by Dalton Maag and rather similar) to see that it’s possible.

      What’s your opinion on Azuro?

  12. M7S,

    Nice post. Just curious, what is your thought about roboto? I hear it should look more like helvetica. Is it a step in the wrong direction for android?

    • Izo,

      Thanks for the comment. =] Personally, yes, I do think it’s a step in the wrong direction; not only is it based on the same skeleton as Helvetica (a grotesque sans-serif), but it appears to be a mish mash of various other typefaces. However, I do reserve full judgement until I actually hold a Galaxy Prime in my hand and see the typeface in use on a high-res screen.

      Stephen Coles feels the same way I do and made an excellent post on Typographica that you should read -> Here.

  13. Since you quote me I would like to share my thoughts on this. “Distinctive letterforms”, like the capital I with serifs, the i and r with top serifs and the l with a tail, are to my mind, purely theoretical ideas which cause more trouble then it’s worth. In some few examples it might be true, but for the rest not. This letters not only look ugly, they also destroy the rhythm of a typeface.
    I would like to add another paragraph of my article you mentioned above:
    Of course reading is much more complex than these very simple considerations. Why a typeface is legible, why it appears fresh or lively is much more complicated and difficult to specify. Rhythm can’t be reduced to a fence pattern. And to create harmonious letterforms it’s much better to follow your own feeling for forms rather than follow rules.

    • Izo,

      Ludwig, thank you so much for your comment! Of course, it would be wrong to reduce UI and screen-ready typography, in this particular example, to sheer rules and regulations. Ultimately, there’s no accounting for taste. Thank you for this timely reminder. =]

  14. Kim,

    I love Droid sans. I use it a lot in my work.

    -1 for Helvetica on iOS for me too. This ain’t the 90s anymore!

  15. I really enjoyed this article. You used excellent examples in showing screen readability for small type.

    One thing I had a hard time with was the type size of your article. A bit small and hard to read. (And no, I don’t need reading glasses…yet)

    I read this article about using 16 pixels for body copy (http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/) a while back and found it to be mostly true. I like small and sexy type for design, but after reading your blog post, I found myself skimming as I read on due to its small size.

    Also, I’m curious as to why you are using a serif font for your website. Why wouldn’t you use the type that you just suggested for small copy, Droid Sans?

    Thanks again for the article. I will come back to your site as a resource!

    • Izo,

      Hi Laura, thanks for the nice words. =] You’re right about the point size of the body text on my own site; I’ve been on the lookout for a new WordPress theme that’s a typographical beauty, grid-based and employs a bigger body copy point size. The article you referenced was a key motivator in me looking for a new site design.

      Regarding my body typeface, it’s just a personal preference; I just dig the look of Droid Serif and it happens to be nicely readable. =]

  16. Average Joe,

    I’m not arguing against you, but I think it’s bad practice, to prove a point by placing Helvetica on a background that has a radial gradient, Right in the center of your radial gradient. How about some monochrome examples instead?

  17. Might be a dumb question, but why only sans-serif?

    • Izo,

      Hi Marco, do you mean why sans-serifs for UI, typically?

      Traditionally at least, typefaces for screens have needed to work on low PPI monitors (say 96). Unlike today’s modern smartphones that boast PPI rewsolutions of 200+, computer monitors have limited pixel space for typefaces to work in. This means every pixel counts. And on low PPI monitors, serifs tend to obscure the instant recognition of words, so UI typefaces for computers have typically been sans-serif with open counters and bowls and large x-heights.

  18. Sander,

    @Izo, thanks for the article, great read. If you ever decide to do a follow-up or an extension, I’d love to see Georgia and Verdana as part of the test.

    Also, the suggestions are very nice. I can understand all of them except for Azuro. I can believe it’s very legible, but personally I find it too ugly to ever want to use it.

    @David, the Kindle uses PMN Caecilia (normal and condensed) and Helvetica. You can change the font when you hack your Kindle. There are tutorials to do this, you can find them via Google. The Kindle screen (e-ink) is different than most devices’ screens though. I noticed you need a relative thick font on it, because the Kindle screen makes it look thinner. Personally, I hacked my Kindle and after many tests I decided on Chaparral and Supria Sans as my favorite choices. I noticed also Adelle, Mokka and Vollkorn performed pretty good on it.

    • Izo,

      Thanks for the comment, Sander! Verdana is definitely an interesting option, considering that it was one of the first typefaces specifically designed for screen. Regarding Azuro, of course there’s no accounting for taste. Personally, I love it. =]

      Thanks for the information regarding Kindle typography, as well!

  19. What a great read…throw a few more notables up there and you’ve got the “go to” pick list for UI Typography.

    Nice work…also interested to see what WordPress theme you end up with in the end that meets your Typography requirements.

    Cheers,
    @morganwadsworth

  20. Georgia (serif) was designed specifically for the screen.

  21. I agree 100% with you in this post, you have brought up all of the reasons why I hate Helvetica as the iOS font, and as a font in general. So many better options out there, for screen and print use, and people giving fueling this love for a so-so typeface.
    Thank you for writing this :D

  22. Diggin’ this article. It’s actually one of the first articles I’ve read and then gone through to read ALL of the comments without feeling like I just lost more braincells than it was worth. Great dialogue here.

  23. Just played around with the vertical/horizontal spacing here on your main post text.

    http://vernontgerzen.com/littlesnapper/playin-around-with-typography-for-izo.png

    I think Khoi and Allan’s Basic Maths theme lends it self quite nicely to customization. It actually makes me want to make it fluid/responsive…

    • Izo,

      That’s the thing, I’d happily continue to use this beautiful Basic Maths theme if I could: increase the body point size, make the h1 size much bigger and do all this without ruining the grid that’s in place. Unfortunately, it’s beyond my skillset.

  24. Aristotelis,

    Thank you very much for your very nice post. It is very well written and gives a nice perspective.

    Still I’d like to discuss a different point of view. I agree with all you said in your post if you look at each font separately on the same screen and/or UI. What happens though, if you start comparing the font choices in their respective UIs?

    For example, I agree with you that Helvetica Neue does not seem a perfect choice in your comparisons, but it is a beautiful font with great proportions and flow. What happens when you put it on the high resolution (326dpi) screen of iPhone? This screen specifically permits smaller fonts to be perfectly readable.
    Also the OSX font rendering engine is different and antialiased from the Windows and Ubuntu one. Same goes probably for the Android one.

    Not saying that instantly Helvetica or whatever other font becomes the best option for UI, just saying that some of your conclusions, might be different if you test each font on their respective screens and UIs that are rendered, instead of the font “printed” on an image or paper.

    Again, thank you for the excellent post.

    • Izo,

      Hi Aristotelis, thanks for the comment. =]

      I agree that the “game” changes a little when you factor in high-PPI screens. When a device starts pushing 300+ PPI, pixels are practically invisible and render more like print. So reading type such as Helvetica (Neue) on high-PPI screens becomes easier as a result…

      But even then, I still feel Helvetica is at a fundamental disadvantage compared to more screen-specific typefaces. The way the finials on the lowercase a and e close off on a flat horizontal line severely shrinks the bowls of these letters. And don’t forget, even at higher PPI resolutions, type on these screens is still at a relatively small point size, which Helvetica (Neue) just wasn’t designed for. At smaller point sizes, for greater word-object recognition and legibility, you need those counters and bowls, you need those open spaces inside individual letters. Helvetica’s skeleton just doesn’t allow for that.

  25. Helvetica Neue is used on iPhone 4/4S/iPod touch 4th gen because it looks really good on the high-PPI “Retina” display. iOS devices w/ lower resolution screens use the regular old Helvetica!

    Oh, and PT Sans Narrow is my favorite caption font :-)

  26. Sean Tomlinson,

    I just wanted to say thanks for the Aller tip. I am currently using it as my main UI font. It’s clean and easy to read and would have never heard of it had it not been for you.

    Cheers!

  27. Good article. I think it’d be worth it to make screen shots of similar interface elements on different platforms — font rendering plays a large part in legibility too.

    • Izo,

      Hi Michel, thanks for the comment. Font rendering does indeed play a large role in UI typefaces; the way Windows 7 renders Segoe UI is visibly different to how Mac OS X or Ubuntu do it. And everyone knows that Helvetica looks awful on Windows machines.

      • I would like to joining the blessings on an interesting article and an educating discussion. Some feedback:

        I would like to second (or third) Michael & Aristotelis on the font rendering issue. The rendering issue cannot be ignored when it comes to the UI font consideration. The text in your specimen images is rendered using greyscale antialiasing, meaning subpixel rendering (en.wikipedia.org/wiki/Subpixel_rendering) is not taken into account and the different approaches for this rendering are not considered either. I recently learned that the main differences between Microsoft’s ClearType sub-pixel rendering technology and Apple’s FreeType implementation is that Microsoft tries to render the letters to the pixels to create sharp shapes while Apple tries to remain loyal to the original glyphs. As a result Apple’s rendering also thickens the letter a bit and the letters seem like their weight is half a notch bolder and their shade darker. As you would imagine both Apple and Microsoft flag researches claiming their approach is superior to the other’s. Ubuntu, Android and other Linux distributions try shooting for a sweet spot between these two approaches with their custom implementation of FreeType.
        I am not even mentioning the hinting issue (more relevant to older OSs) as that would open an additional endless can of worms.

        Another important issue, in all of the specimen images you included you have chosen white on blue background. The negative (light on dark) case is less indicative than the positive one as most UI text is designed in a dark color on a light (usually white) background. The negative example is relevant though secondary.

        Finally, while your survey is interesting and insightful the parameters you chose are far from being conclusive. There are many more parameters to consider when evaluating readability and since it is such a sophisticated perceptual/cognitive activity we don’t really have an exact algorithm to run on a font and evaluate its preparedness to be used in one way or another. I think exploring and considering the parameters you mentioned above is very important, but only as a subset of a wider array of considerations.

        These and other considerations are probably worth a follow up post/research. Thanks again for putting this together and getting this great discussion going!

        :)

        • Izo,

          Hi Mushon, thanks for the comment. =]

          Regarding font rendering, I do agree that you can’t disregard and it’s a massive topic to discuss when thinking about UI typefaces. So massive, in fact, that discussing font rendering alone would be a post on its own. Which is the reason why I didn’t include issues of font rendering in this particular article, but you are right. For your information, the typefaces rendered in this article use RGB subpixel rendering, not grayscale. Also, rest assured I am intimately familiar with the different rendering “philosophies” between Apple, Windows and *NIX. =] In fact, back in 2007, Joel Spolsky wrote an interesting article comparing Windows and Apple’s different font rendering philosophies.

          The issue of the actual image colours I’ve used with this article has been flagged previously and duly noted. I may look into more standard font presentations when I have more time.

          Finally, I’m aware that my article—whilst detailed—is not by all means definitive and there are many more issues that could be discussed about UI typeface design. As Ludwig mentioned below, although it’s nice to take into consideration these more technical aspects, sometimes it’s better to just go with your gut. =]

  28. jayarmstrong,

    Thanks for the detailed write up. I just switched both my Droid and my Ubuntu system over to the Armani font, and am shocked at how much of a difference it makes. I love Ubuntu (the font) and Droid Sans is great but Armani just tastes like eye candy, at least for a few more weeks.

  29. LaC,

    I read this article and it sounded reasonable, but I distinctly perceived the text of the article itself as hard to read. Then I got to the comments and saw that the article is set in Droid Serif, the very font that is praised as the most readable. I am baffled.

    • Izo,

      Hi LaC, that’s likely a point size issue, something people have pulled me up on and I’m well aware of. I’m currently in the midst of looking for a new WP theme that features a similar gridded, typographical layout but with a bigger body point size. =]

  30. Alex,

    One thing you missed: character width. For glyphs that are used interactively (as opposed to simply being printed on a piece of paper), it’s far more important that I’m able to select exactly the text I want, than to be able to distinguish “I” from “l”. (Non-native speakers will certainly have more trouble, but for me, you could even screw up some of the letters in “illiterate” and I’d still know exactly what you’re talking about.)

    That the letters in Helvetica Neue are a bit wider than most is not a flaw, but a tremendous feature — I wish the skinny letters were even wider!

  31. Dragan Poljak,

    But why on earth did you put that light in the middle of all the images? It annoys as it reduces contrast, and gets in the way when comparing letters in the middle with those close to the edge. It doesn’t mimic the reflections of the screen — if that was your intention? — nor does it make anything beautiful.

    Just remove that light from the images, OK? Now.

  32. GadgetGav,

    You say that phone typefaces need to be legible at 9-12 point sizes but then render all your tests in sizes much larger than that. You make some allusion to the pixel density of a modern monitor, but you don’t make any effort to explain whether the point sizes you use on the screen are equivalent to the smaller sizes on a phone with a higher dpi screen. Please explain the logic behind your choices here…

    If I had come across this post as it was originally posted with just the blue gradient backgrounds, I would have stopped reading at the first paragraph. How can you post an article about readability and try to make comparisons when there is a huge difference in background between your examples. That you would even post it in that state knocks a huge hole in your argument.

    Generally, overall this post is a classic case of beauty being in the eye of the beholder. There is little real proof here why one is better than another – there can’t be when you’re not taking into account the actual screens where these fonts are used. The fact that Droid Sans wins you “anagogy” test because it’s the only one with a double-storey g smacks of picking the test to match the outcome you want. Personally, I have no problem reading that word in any of the fonts as rendered on my 24″ monitor. I could argue that a closed loop in the g descender makes the word less readable because it just adds to the jumble of circular letter shapes.

    All in all a very long post just to get a dig in at Apple for “form over function”. To quote Stephen Fry from his tribute to Steve Jobs
    “The use of that [last] phrase, “style over substance” has always been, as Oscar Wilde observed, a marvellous and instant indicator of a fool.”

    • Izo,

      Hi GadgetGav, thanks for the comment. =] I’m sorry to see you’ve interpreted this post as a dig against Apple. As a happy owner of an iPhone and an iPad, I have no reason to hate on them, don’t you think?

      Sent from my iPhone.

  33. Lee,

    Interesting article, I find the Droid serif typeface your using to be almost unbearable to read, didn’t realise it was a droid typeface until you pointed out, but I was feeling uncomfortable reading in much the same way as having to endure a post by someone done in ALL CAPS!

    I’m reading this on a laptop 20 inches away if it’s of any relevance.

  34. Richard Wills,

    The main reason I keep my old Mac G3 around is comfortable for me when I am on a lengthy writing session. Using Appleworks {insert your favorite snark here} with the font Chicago. Yeah, it’s a pain exporting it to my MacBook or wherever, but for us literate types, I sure wish it was universaly available. So many mediocre fonts out there I have to slog through.

    I love the Chicago font, hell I love whoever designed it. With my bad eyes it is a wonderfull tool, clean crisp and scalable. I really miss it on Final Draft Pro and Pages and those evil times when I’m dragged blubbering into using Word. I now find myself prefering either Times New Roman or American Typewriter. Though for the latter I wish it include the typewriter sound effects. That would be cool.

  35. DP,

    There’s a lot of personal preference that comes into play, too. I can’t stand the double-storey Gs in Droid Sans. Despite being an unashamed Apple fanboy, Segoe UI is actually the most pleasing to the eye of all the fonts in your side-by-side images.

    On the iPhone 4/4S screen, I find Helvetica Neue extremely easy to read. You say in an update that you won’t touch on rendering, but it must make the difference because seeing it at smaller point sizes here on my computer screen, I had to strain to read it but I suffer no such strain on my phone.

  36. Gee,

    Why the hate for Droid Sans? I’m a designer and actually like the look of it on mobile. Granted I don’t design type so maybe their are some flaws that I just don’t see.

    I also found it interesting that they used the same font rendering for all tests, especially when Segoe UI was designed with cleartype rendering in mind.

  37. Michael Long,

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

    You seem to be playing platform against platform, but then focus on things like how a sans-serif font doesn’t have serifs. Are we then supposed to turn every sans-serif into a serifed one, just to meet some edge cases?

    I don’t how you did your screen shots, but you might also consider that different platforms render the same font differently, especially in regard to sub-pixel aliasing. Thus Helvetica Neue on Windows is different than Helvetica Neue on OS X.

  38. Mark,

    How about ITC Officina Sans, Erik Spiekermann’s font from which some of these stole many of their ideas?

  39. Mike,

    As an engineer one of the biggest font problems we run into are the fonts where the Upper I, lower l, & sometimes numeral 1 all look the same. So fonts like Segoe & Ubuntu are much more readable in formulas than Lucida & Helvetica.

  40. David Hughes,

    Very informative article.
    Any thoughts on non-proportional fonts for cutting code?
    Any faves.
    Cheers

    David

  41. Sorry to be “so-1990′s”, but I still think the best screen typeface is Verdana. Its wide letterforms make is exceptionally easy to read on screen, especially without anti-aliasing. I really don’t think screen type should be anti-aliased, except for headlines.

  42. 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.

  43. 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.

  44. 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.

  45. 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.

  46. 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” :)

  47. 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.

  48. sams,

    Hi,

    Thank you four your nice writing on The Contestants

    Thanks.

  49. Covarr,

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

    O

    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

  50. 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.

Trackbacks

30 pings so far.

Add Your Comments

Disclaimer
Your email is never published nor shared.
Required
Required
Tips

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <ol> <ul> <li> <strong>

Ready?