Typeface seems like a very simple thing. Whether you’re choosing fonts for a website, an app, or just a Word document, it’s as easy as just choosing whichever you think look nice, right?
Unfortunately, it’s never that simple. Typeface is an incredibly important aspect of how readers interact with a piece of writing. When it comes to software and apps, it’s even more vital that you select your typefaces carefully. Thanks to the smaller screen size of mobile devices, a group of poorly-selected fonts can severely damage the usability and visual attractiveness of your app. Here’s some things to consider when selecting fonts for your app.
Copyright can be tricky in a lot of cases, but it’s actually pretty straightforward in this case. If you’re using the system fonts in iOS or Android, you don’t need to worry about violating any copyright, as the fonts are part of the already-distributed platform. Simple enough.
However, if you want to use any custom fonts in your app – which is more the case with Android – things get a little more complicated. You need to ensure that you are using fonts for commercial use, even if your app is nominally free on the app store. If it’s not clear what the licensing is on a font set, don’t use it. It could be a seriously expensive mistake for you if your app goes live without the proper rights to do so.
One resource in particular stands out in this department, and that’s Mobile Fonts. It’s designed specifically for mobile devs, offering a very straightforward licensing and purchasing system.
It’s important for fonts to look nice, and nothing looks worse than ill-matched fonts. Using consistent, complementary typefaces isn’t just an issue of aesthetics, although that’s important too. It’s an issue of usability and accessibility.
In the case of choosing multiple fonts for an app, consistency is more important than the ‘look’, so to speak. Some fonts are easy to read and comprehend normally, but if you bold or colour them, they might not be as suitable, so you may need to choose ‘heading’ or navigation fonts that are more eye catching than what you’re using for bodies of text.
It’s therefore worth ‘pairing’ typefaces. The basic principle underlying good font pairings is that of contrast and correspondence – in other words, make things the same or make them very different. Matching fonts lend themselves well to a consistent look, while contrasting fonts can be used to great effect in emphasising the different features of your app.
Luckily, there are hundreds of resources already out there designed specifically for this task. Font Pair is a particularly useful and easy-to-navigate site, giving you direct download links and information about the fonts, but others like Typewolf and Fonts In Use also give you more options.
Consistency is also important to consider if your app is the mobile counterpart to a desktop site. By using consistent typeface across both platforms, you’re projecting a consistent brand or product image. This also goes for your app icon and any other artwork in general.
Commissioning an app font
Choosing a typeface isn’t easy, and you can always hire someone to design your fonts for you. A professional will already have full knowledge of what works and what doesn’t, and bringing one into the fold with your current team will enable them to develop a typeface specifically for your needs.
There’s a couple of things to bear in mind, though, if you’re hiring a professional designer. Namely, it’s important to communicate with them openly about not only your app, but also your brand’s ethos and aesthetic. Be very clear and straightforward about your requirements. Most importantly, let them do their job! It’s important that designers listen to you, but it’s also important to let them take the reins.
Finally, it’s worth mentioning that with each additional font you use on your site, the more server calls will be made and the slower your page will load. The overheads are minimal compared to things like widgets, but it’s still worth considering, especially when it comes to mobile device optimisation. One way around this is by incorporating any bespoke fonts into image files, such as in your page header.
(Image by FontShop)