Fonts and typography play a major role in user experience, but just which are the best for web and mobile app design?
Without a doubt, typography is one of the most critical elements of UX design. It can make or break a user interface. If your users are unable to read your content, you can say goodbye to them immediately. That’s why even a rudimentary understanding of typography means you can determine for yourself the best fonts for apps and websites.
Legibility is everything and choosing the right font will have a big impact on the overall user experience of your web and mobile apps.
Jeffrey Zeldman, web and interaction designer, comically opined that “90% of design is typography. The other 90% is white space”, showing that when you go wrong with typography – you really go wrong.
As such, much has been debated regarding the best fonts for apps and websites. As with many debates in the UX design community, there may never be a right answer. But that won’t stop us from giving it a shot…
What exactly are web and mobile fonts?
Typography, fonts, typefaces… so many names for what are essentially the same thing. If words are what you read on the screen, then fonts can be defined as the style of those words. Think of fonts as clothes for the words, their outfit if you like.
Since each font is like a unique outfit, it stands to reason that each font will have a different purpose or intention. Just like wearing a scarf in summer would be absurd, certain fonts work better in different situations. By creating a symbiosis between your design and fonts, you will be creating coherent user experiences.
Why do some fonts work better than others?
Fonts have personality and character. Since fonts are designed by people, by nature these fonts will maintain characteristics that are idiosyncratic to that font. Eternally mocked Comic Sans would look out of place were it to appear on a menu at a Michelin-starred restaurant, for example. In this way, many of us already understand the feeling that fonts can illicit. It’s this feeling that can help determine which are the best fonts for apps and websites.
We’re not talking about the aesthetic value of a font either. Times New Roman is a beautifully designed, timeless font. But that doesn’t mean it would always fit in places of elegance or beauty. It’s important to note that just because a font looks good doesn’t always mean that its appearance translates into other important areas: legibility, readability and usability.
Using responsive typography for better legibility
Mobile is the dominant screen today so UX designers should ideally be designing with responsive typography in mind. Remember, fonts are there to be read, not pretty decoration. If you have a font which displays large on an ordinary computer screen but doesn’t scale down properly when viewed on a mobile, then your website or mobile app is going to look terrible and it won’t even matter if you’ve chosen the best font in the world.
To really push the boat out, think about fluid typography. It’s like responsive typography’s more attractive cousin. Basically, fluid typography resizes fonts to match any screen not just at certain breakpoints as with responsive typography.
Which fonts should I use for web and mobile apps?
Before we think about the best fonts for apps and websites, it’s important to make the distinction between two different styles. These styles are sans-serif and serif.
Serif fonts are fonts which have serifs. The origin of the word serif is a mystery but a serif itself is a small line attached to the end of a stroke in a letter. Think of fonts like Times New Roman or Clarendon. A sans-serif, also known as Grotesque, is a font without serifs, hence sans. These fonts include familiar typefaces such as Helvetica and Open Sans.
A selection of the safest web fonts includes:
- Times New Roman
The reason these are deemed safe choices are because it’s generally accepted that these fonts will be installed on most devices, compatible with most browsers.
Google Fonts has a vast selection of popular fonts, including serif, sans-serif and display fonts. Other benefits of Google Fonts include:
- Free to use
- Unlimited usage
- No licenses required
- Cross platform display
How to choose the best font for apps and websites
Imagine you’ve spent weeks creating a website or mobile app. You’ve got the layout and structure sorted, the content is ready to go but you’re still mystified when it comes to fonts. There are so many out there. You’re drowning in fonts. First, don’t worry. We’ve all been there. Fonts can be daunting.
Do fonts need to be unique?
At first, using fonts can be overwhelming. Especially for UX designers. But the first thing you should do is disregard most fonts. I know – drastic. But the truth is that many of the fonts you’ve already got pre-loaded onto your computer and even many of the available fonts out there on the internet don’t get used widely within web and mobile app design. Every so often a font will pop up and get used by everybody, like Gotham. Ubiquity isn’t something to shun when it comes to fonts either, particularly if that font does the job well.
It’s likely that you can count on both hands the number of fonts that pop up on frequently in mobile and web design. You might be wondering with such versatile and numerous fonts that this wouldn’t be the case. The reason the same fonts keep showing up time and time again is because they work best. They’ve been tried and tested again and again. They’re readable, legible and most people are familiar with them already. We’re looking at you, Helvetica.
There is more to typography than just picking a font. But these questions should help you distinguish a good font for apps against a bad font:
- How many weights does the font have?
- Is readability good owing to the x-height?
- Does this font scale well on multiple devices?
- Is it accessible?
- What is its contrast ratio?
If a font has a wide selection of weight, a large x-height and can scale well then, it’s likely that it’ll work well in most layouts, context permitting.
When deciding on typography in a project, your user’s needs should be at the forefront of your mind. After all, it is your users who you’re designing for. If you’ve designed a mobile app focused on learning, then you’ll have to choose a font to reflect that. Something flexible and functional. Style over substance. And just because you like a font, doesn’t mean it’s going to work for others.
What are the best colors for fonts?
When creating a mobile app or website, bear in mind that font choice and color share a similar principle: less is more. Too many colors can be garish, difficult to look at and create bad UX design. Likewise, too many fonts can be cumbersome, a strain to read and overwhelming.
Which ever fonts you do decide on, limit yourself to using just one or two at a time. Sometimes just using one font at various weight can be just as effective as using multiple fonts.
In Justinmind, you can use default and Google Fonts in your designs. They’re easily integrated into the wireframing tool. If you’re stuck between a few font choices then a great solution to this age old problem is to simply prototype and test until you have the most appropriate solution. Prototyping fonts can put you on the right track before making any commitments that might affect the UX design later on.
Best fonts for web and mobile apps – the takeaway
Asking what are the best fonts for apps and websites is going to elicit a multitude of responses. The answer is, it depends. It depends on a range of different factors, from audience demographic and cultural context to device use and product objective.
Perhaps then there is no “best” font for apps and websites. Perhaps, it’s a question of what is the most appropriate given the pre-defined circumstances. And, frankly, isn’t that how all UX design should be?