That being said, now half close your eyes.
There’s only a few pixels of available space to draw a glyph, so a larger x-height takes full advantage of them. (I know the scale isn’t very representative in these images, but it should give you an idea.)Īs text gets really tiny, you’ll probably want to look for a font with a large x-height. Microscopic! Here’s Nextgen Reader on a Windows phone. You’ll see text easily gets tiny in software. Check the home screen on your smartphone. Roboto may look a bit impersonal, even boring at first sight, it is by far a better choice.Īdditionally, a good UI typeface has to be extremely clear in small sizes.
In user interfaces, we want the typeface to go unnoticed and the user to get things done. But in all its shiny glory, it screams for attention and may therefor distract our users from tasks and goals. As an interface is mostly type, we need to make absolutely sure the font doesn’t introduce friction between the product and the user.Ĭlarendon is beautiful. Frere-Jones’ quote underlines the idea that above all we need a clear typeface. That makes a lot of sense, knowing that clarity is a good UI’s foremost characteristic. But especially at interfaces, our eyes need fonts that cooperate rather than resist. So, if we go back to the raw letterforms, what exactly are we looking for in a good UI typeface? What makes it a good fit for a user interface? Tobias Frere-Jones, renowned American type designer (of Gotham among others) once said:Īll text needs legible typefaces. Still, your typeface choice is a very big deal. The screenshots of Weather clearly demonstrate that. It’s about balance, positioning, hierarchy and structure. And of course typography is so much more than just a typeface or the text in an app.
Here’s a remarkable quote:Ī great designer knows how to work with text not just as content, he treats text as a user interface. The same goes for desktop software like Sketch:īack in 2006, iA wrote an enlightening blog post on that matter, called Web Design is 95% Typography. Tumblr’s back-end user interface is almost entirely made up of text and icons: As good as any app can serve as an example, but let’s start with Weather for iOS: apart from the decorative clouds and inevitable icons, its UI is essentially pure text: On the surface, most of an app’s UI is exactly the type it’s set in. Because even more than icons, a typeface can make or break clarity. Clarity is the most important value of a well-designed user interface.