What makes for a good UI font?
October 29, 2011 10:23 AM Subscribe
Ian Hex writes about the features that make for a good UI typeface by comparing and contrasting five different fonts (Segoe UI, Lucida Grande, Ubuntu, Helvetica Neue, and Droid Sans) . He also links to a great post on the making of Azuro. Left out of the race was Nokia Pure.
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.
That's a bit of a problem, because it becomes clear that his back-of-the-envelope assessment of UI legibility is not based on the device on which the user interfaces with, but on a web graphic rendered at much lower quality.
posted by Blazecock Pileon at 10:44 AM on October 29, 2011 [1 favorite]
That's a bit of a problem, because it becomes clear that his back-of-the-envelope assessment of UI legibility is not based on the device on which the user interfaces with, but on a web graphic rendered at much lower quality.
posted by Blazecock Pileon at 10:44 AM on October 29, 2011 [1 favorite]
For those of us on the Windows platform, the switch to Segoe UI has been a relief. It's a pretty good typeface.
posted by Ivan Fyodorovich at 10:52 AM on October 29, 2011 [1 favorite]
posted by Ivan Fyodorovich at 10:52 AM on October 29, 2011 [1 favorite]
Mod note: fixed the FPP error on the OPs request. carry on
posted by jessamyn (staff) at 11:06 AM on October 29, 2011
posted by jessamyn (staff) at 11:06 AM on October 29, 2011
From second link: The typeface is available as Azuro Office for use on desktop computers (€199) and as Azuro Web in .eot and .woff format (€149). However, to celebrate its release FontShop offers both versions at the irresistibly low introductory price of €19.90 each until May 31, 2011.
Oh yes, I can imagine that it took the world by storm at that "irresistibly low introductory price." I'm no font expert, but when most popular fonts come free with an OS or are available on a website for a few bucks at most, this seems rather extravagant. And that full price quote, I mean, you can buy Microsoft Office for less than Azuro Office. But I suspect I'm missing something here -- maybe this is a licensing fee for commercial use?
Georg’s commitment went so far as to jailbreak his iPhone and hack the iOS system font Helvetica by replacing the original glyphs with the glyphs from Azuro.
Gasp! Shock! Faint!
Whereas an Azuro Office font “weighs” approximately 135 K, the size of the corresponding web font lies around 35 K. For a website with two fonts that is visited a thousand times a day the smaller file size reduces daily traffic volume by 200 MB!
This is kind of a false comparison though, since you're comparing the font to itself. This is really more of a statement about how useful web fonts are.
Jens Kutilek concludes: “The Azuro fonts are hand crafted in the true sense of the word…”
You mean they hammered them out of bits of metal in a physical type foundry?
posted by JHarris at 11:09 AM on October 29, 2011 [1 favorite]
Oh yes, I can imagine that it took the world by storm at that "irresistibly low introductory price." I'm no font expert, but when most popular fonts come free with an OS or are available on a website for a few bucks at most, this seems rather extravagant. And that full price quote, I mean, you can buy Microsoft Office for less than Azuro Office. But I suspect I'm missing something here -- maybe this is a licensing fee for commercial use?
Georg’s commitment went so far as to jailbreak his iPhone and hack the iOS system font Helvetica by replacing the original glyphs with the glyphs from Azuro.
Gasp! Shock! Faint!
Whereas an Azuro Office font “weighs” approximately 135 K, the size of the corresponding web font lies around 35 K. For a website with two fonts that is visited a thousand times a day the smaller file size reduces daily traffic volume by 200 MB!
This is kind of a false comparison though, since you're comparing the font to itself. This is really more of a statement about how useful web fonts are.
Jens Kutilek concludes: “The Azuro fonts are hand crafted in the true sense of the word…”
You mean they hammered them out of bits of metal in a physical type foundry?
posted by JHarris at 11:09 AM on October 29, 2011 [1 favorite]
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”).
posted by ovvl at 11:40 AM on October 29, 2011
posted by ovvl at 11:40 AM on October 29, 2011
meh. I just use 'Comic Sans' for everything.
*ducks*
posted by sexyrobot at 11:48 AM on October 29, 2011
*ducks*
posted by sexyrobot at 11:48 AM on October 29, 2011
You mean they hammered them out of bits of metal in a physical type foundry?
I like physical fonts and I cannot lie.
posted by The River Ivel at 11:53 AM on October 29, 2011 [1 favorite]
I like physical fonts and I cannot lie.
posted by The River Ivel at 11:53 AM on October 29, 2011 [1 favorite]
Whereas an Azuro Office font “weighs” approximately 135 K, the size of the corresponding web font lies around 35 K. For a website with two fonts that is visited a thousand times a day the smaller file size reduces daily traffic volume by 200 MB!
Waitwhat?!?!?!?!
Did sending ASCII representations of characters across the wire stop in some new version of HTML or CSS?
posted by pjern at 11:57 AM on October 29, 2011 [1 favorite]
Waitwhat?!?!?!?!
Did sending ASCII representations of characters across the wire stop in some new version of HTML or CSS?
posted by pjern at 11:57 AM on October 29, 2011 [1 favorite]
Georg Seifert: type design geek and programming genius.
Blech.
posted by fatbird at 11:59 AM on October 29, 2011 [2 favorites]
Blech.
posted by fatbird at 11:59 AM on October 29, 2011 [2 favorites]
I recently switched from Windows Vista to a Mac. I've found that way more important than the font itself is the quality of font rendering. Compared to Vista, MacOS X rendering is really beautiful. And on Apple's high density LCDs stuff starts to look like actual type instead of bitmap fonts. Windows 7 has improved the font rendering model too and I gather looks pretty good as well.
The funny thing is I used to dislike Apple font rendering; it seemed so blurry. Turns out it only did on low density screens.
posted by Nelson at 12:15 PM on October 29, 2011 [3 favorites]
The funny thing is I used to dislike Apple font rendering; it seemed so blurry. Turns out it only did on low density screens.
posted by Nelson at 12:15 PM on October 29, 2011 [3 favorites]
If you ever want to make UI designers' heads explode, just show them a picture of a ham radio rig. Frinstances: Yaesu FT DX 5000 or Icom IC-7800. Less isn't more here; even more than you thought humanly possible is barely enough.
posted by scruss at 12:27 PM on October 29, 2011
posted by scruss at 12:27 PM on October 29, 2011
scruss...Except, good UI design isn't necessarily about "less is more". Good UI is about appropriateness to use and situation. It may very well be that those radios were subject to a UI designer's hand in some way.
posted by Thorzdad at 12:33 PM on October 29, 2011
posted by Thorzdad at 12:33 PM on October 29, 2011
pjern: Not every website needs distinct typography, but adding some personality isn't automatically a bad thing.
I kind of like e.g. CNet's use of TypeKit's Proxima Nova Extra Condensed. It doesn't feel tackled on, it gives the website some character and so on.
posted by dst at 12:41 PM on October 29, 2011
I kind of like e.g. CNet's use of TypeKit's Proxima Nova Extra Condensed. It doesn't feel tackled on, it gives the website some character and so on.
posted by dst at 12:41 PM on October 29, 2011
I feel a bit sad that he didn't discuss Chicago, which was used for menus in the Mac OS until OS X and through the first three iPod generations at a minimum. (I believe it was a conscious choice for the iPod. I remember a great rush of nostalgia at seeing Chicago when I got my iPod.)
posted by hoyland at 12:42 PM on October 29, 2011 [2 favorites]
posted by hoyland at 12:42 PM on October 29, 2011 [2 favorites]
Ugh! He ends up picking Droid Sans? Through all those tests, that was the one I continuously winced at.
posted by scrowdid at 12:56 PM on October 29, 2011
posted by scrowdid at 12:56 PM on October 29, 2011
And I also felt frustrated, according to this, the whole world runs on Windows and Mac/iOS. I guess I am just a special snowflake as I read the article in Linux.
posted by Samizdata at 12:59 PM on October 29, 2011
posted by Samizdata at 12:59 PM on October 29, 2011
"And I also felt frustrated, according to this, the whole world runs on Windows and Mac/iOS. I guess I am just a special snowflake as I read the article in Linux."
And you didn't notice that Ubuntu is a Linux distribution?
posted by Ivan Fyodorovich at 1:09 PM on October 29, 2011 [3 favorites]
And you didn't notice that Ubuntu is a Linux distribution?
posted by Ivan Fyodorovich at 1:09 PM on October 29, 2011 [3 favorites]
I should have clarified that I was speaking more of the Azuro article. Mea culpa.
posted by Samizdata at 1:30 PM on October 29, 2011
posted by Samizdata at 1:30 PM on October 29, 2011
Although, a plus for this post - That font Aller is pretty nice looking to me, so I have downloaded it (all legit - it is free) and am installing it. Then, off to themeland to use it.
posted by Samizdata at 1:34 PM on October 29, 2011
posted by Samizdata at 1:34 PM on October 29, 2011
I'm surprised he gave a didn't have worse words for Lucida Grande. I think most Lucida fonts seem pretty clunky, with poor spacing and weight. Lucida Handwriting is also now approaching Comic Sans status.
posted by Jehan at 1:34 PM on October 29, 2011
posted by Jehan at 1:34 PM on October 29, 2011
scruss: "If you ever want to make UI designers' heads explode, just show them a picture of a ham radio rig. Frinstances: Yaesu FT DX 5000 or Icom IC-7800. Less isn't more here; even more than you thought humanly possible is barely enough."
Actually it's funny you mention that, because Jef Raskin, IIRC, discusses radio interfaces in his book The Humane Interface... Ah yes, google books has the page for the radio with 32 buttons and such...
posted by symbioid at 2:24 PM on October 29, 2011 [1 favorite]
Actually it's funny you mention that, because Jef Raskin, IIRC, discusses radio interfaces in his book The Humane Interface... Ah yes, google books has the page for the radio with 32 buttons and such...
posted by symbioid at 2:24 PM on October 29, 2011 [1 favorite]
FWIW, still really liking Aller. Looks good at 11 points with RBGA antialiasing and slight hinting.
posted by Samizdata at 6:17 PM on October 29, 2011
posted by Samizdata at 6:17 PM on October 29, 2011
Whereas an Azuro Office font “weighs” approximately 135 K, the size of the corresponding web font lies around 35 K. For a website with two fonts that is visited a thousand times a day the smaller file size reduces daily traffic volume by 200 MB!
Waitwhat?!?!?!?!
Did sending ASCII representations of characters across the wire stop in some new version of HTML or CSS?
pjern, in order for a page to display the font chosen by the web designer correctly, the font package must be transmitted to the reader's computer, in addition to the actual ASCII(+) characters.
The only exceptions are where only the characters used are transmitted, in which case a proportionally smaller subset of the 35k is sent - but it is still sent, on top of the ASCII message content.
Assuming the whole font set is transmitted, the word "bagel" requires 5*2 bytes + 35 kB for the font. Transmitting 10,000 characters on a really long web page, all in the same font, requires 10000*2 bytes + 35 kB for the font.
HTH.
posted by IAmBroom at 7:39 PM on October 30, 2011
Waitwhat?!?!?!?!
Did sending ASCII representations of characters across the wire stop in some new version of HTML or CSS?
pjern, in order for a page to display the font chosen by the web designer correctly, the font package must be transmitted to the reader's computer, in addition to the actual ASCII(+) characters.
The only exceptions are where only the characters used are transmitted, in which case a proportionally smaller subset of the 35k is sent - but it is still sent, on top of the ASCII message content.
Assuming the whole font set is transmitted, the word "bagel" requires 5*2 bytes + 35 kB for the font. Transmitting 10,000 characters on a really long web page, all in the same font, requires 10000*2 bytes + 35 kB for the font.
HTH.
posted by IAmBroom at 7:39 PM on October 30, 2011
« Older Google, Wyden, Kirk, and Chaffetz | Overwatch Newer »
This thread has been archived and is closed to new comments
"Roboto is a four-headed Frankenfont"
posted by Blazecock Pileon at 10:34 AM on October 29, 2011 [2 favorites]