If you look closer at the apps on your smartphone, you’ll notice that most of the apps’ UI consists of the fonts used. That’s why the typography design can make or break your interface. Simply by choosing a certain font you can enhance or reduce the usability, readability, clarity, accessibility, and hierarchy of your application.
The stakes are high. But how do you make the right choice when you look at the fonts, and all of them look the same to you?
To solve the puzzle, you need to know what exactly to look for in a good UI typeface.
What elements of typography design to look for?
Interface fonts should meet the very strict requirements for clarity. Tobias Frere-Jones, a famous American type designer, once said:
Now, how can you make sure you found a “cooperative” font? Look for one that meets the following four criteria:
1. Choose fonts with low contrast
Contrast is the difference in weight between the thickest and the thinnest strokes in a typeface. If all strokes are the same, there is no contrast. If some strokes are significantly thinner than others, it is a high contrast font.
Look at the Didot font in the image above — it’s a font with extreme contrast. It looks impressive and elegant in headlines and posters, but in small sizes, the thin strokes become hardly visible. Don’t use fonts like Didot in interfaces if you want your copy to be readable. Better choose grotesque fonts or, at least, low-contrast serifs.
2. Choose fonts with open aperture
Readability
An aperture is the opening between the counter and the outside of the letter. To evaluate the aperture, look at the letters that form an open shape. Take the letter "a", for instance. If the counter of the letter looks more like an open circle, the aperture is closed, and if it looks like a semicircle, the aperture is open.
Due to its closed aperture, Helvetica Neue is not the best font selection for UI. The font was originally developed for big headlines. Due to its closed letterforms, it performs badly in body text in terms of legibility and readability.
3. Choose fonts with distinct features on each character
Gill Sans illustrates the point perfectly. It's a great font, but it's just unsuitable for interface design. An uppercase letter i, a lowercase letter l, and the number 1 look the same. This can make it very difficult for users to differentiate between the characters in a text.
Look for fonts with more distinctive letterforms, they would be much easier to read. Make sure to check for these three imposter letters at a minimum (I, l, 1) when choosing fonts for a design.
4. Choose body text fonts
There are different types of typography, and we should take those types into account when evaluating a typeface for UI. Body copy fonts are the only category suitable for interfaces. Decorative, display, and especially script fonts should be left for graphic design and landing pages.
Druk, for instance, is an expressive font that is super-popular in web design. But if you use Druck in an app design, your app would become unusable.
As you can see, all four of our candidates are unsuitable for interfaces.
Okay, then what fonts are a safe choice for interface design?
The Eleken team has been designing SaaS apps since 2015, and during this time we have formed an ultimate font list. The first three types are an all-time classic that won’t spoil any interface. The rest are their fancier alternatives:
- Roboto
- Inter
- SF Pro
- Segoe UI
- Droid Sans
- Open Sans
- Aller Sans
- Source Sans Pro
- Nunito Sans
- Proxima Nova
- Azuro
- Avenir
- Gotham
- PT Sans
- Lato
- Lucida Grande
- Verdana
- Fira Sans (a little too tight sans serif typeface, be careful with it)
- Ubuntu (smooth and rounded, therefore specific)
How to choose font combinations
Choosing a suitable font for a body text is not enough. A designer should also create an effective typographic hierarchy that would show clearly what information is most important on the screen.
The contrast can be reached by using different styles and sizes of one typeface, or by choosing different fonts for headlines and for body text. As a rule of thumb, you shouldn’t use more than two fonts in an app. Sometimes three combinations are possible, but not recommended. Try to stick to two fonts maximum.
If you want to know what font goes with what, here we have three resources for fonts combination:
How to choose font proportions
When you have a combination of fonts chosen, it’s time to think about the font proportions in sizes of paragraphs and various headers. There are a lot of resources that help to find the best fonts ratio. For example:
To start with, pick your basic font size for body text (15 pixels, let's say) and use one of the scaling services to calculate fonts' dimensions, which you may use for the various header, paragraphs, and so on. In general, it is suggested to use a 1,5 ratio, but you may fine-tune it in the service, and see what other options would look like.
Let’s see how the choice of fonts works on the real-life example
Photobooth Supply Co is the company that likes Sofia Pro font for its “friendly” look and was using this font everywhere in its app and website. Right now, Eleken designers are working on its app redesign and question its font choices.
Sofia Pro is a geometric sans serif font. It means that the type is shaped mainly out of very clean geometric forms, like almost-perfect circles and straight lines. Yes, it looks friendly, but doesn’t work in favor of the website’s credibility.
Moreover, the font’s geometric nature limits the distinct features that each character may have. If you look closely at individual letters like "a" and "o" on the screenshot above, you’ll notice that there are not so many differences between them. That makes Sofia Pro not the best choice for long-form content.
Last, but not least, the Sofia Pro typeface family turned out to be not enough for establishing hierarchy between headlines and body text. For example, the hierarchy is almost invisible in the picture below, since both titles should be in the 16 px size. They differed only by their shades, but for the visually impaired person, the difference would be totally invisible.
To improve the situation, our designers redesigned one screen with alternative fonts and font combinations:
- Sofia Pro + Avenir Next
- Sofia Pro + Inter
- Inter
- SF Pro
- Open Sans
The client chose the first option, and now it’s easier to build a visual hierarchy, even for titles of the same size.
Summarizing the typography graphic design in UI/UX
Typography can seem an obscure part of the design, but 90% of the information on the web is text. That’s why a UI/UX design is impossible without understanding some basic typography rules. To make your app legible and clear,
- Choose fonts with low contrast;
- Choose fonts with open aperture;
- Choose fonts with distinct features on each character;
- Choose body text fonts.
- Don’t forget about hierarchy and font proportions.
In the end, you want your app's typography design layout to be clear, readable, and accessible. The more understandable your texts are, the better is the app’s usability.
Besides, rumor has it, the app’s usability increases if the app is designed by UI/UX professionals. So, if you are looking for experienced designers to fine-tune your app’s fonts and everything else, check out Eleken’s UI/UX services.
