Best fonts for mobile app design

Fonts for apps play a major role in your users’ experience. Here, we’ve rounded up the best ones you should use for your next mobile app design

Without a doubt, fonts are one of the most critical elements of UX design. It can make or break a UI. 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.

Design hi-fi prototypes for apps with any font you want. Download Justinmind now! Download free.

Legibility is everything and choosing the right font will have a big impact on the overall user experience of your mobile apps. In this post, we’ll look at how to choose fonts for app design. We’ve also thrown in a list of the best free and paid ones around!

Why your choice of fonts for apps is important

If words are what you read on the screen, then we can define fonts as the style of those words. Think of them as clothes for the words, their outfit if you like. Since each font is like a unique outfit, it stands to reason that each one 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 for apps work better than others?

Following on from our outfit analogy, let’s imagine you wear a Hawaiian shirt to a funeral. Seem appropriate? Neither would Comic Sans be on the menu of a Michelin-starred restaurant. In this way, many of us already understand the feeling that fonts can elicit. It’s this feeling that can help determine which are the best fonts for apps.

However, we’re not just talking about whether or not a font “goes with something”. Just because a font looks good doesn’t always mean that its appearance translates into other important areas: legibility, readability and usability.

Responsive fonts for better app legibility

Mobile is the dominant screen today so UX designers should ideally design with responsive typography in mind. Responsive typography have geometric and scalable outlines. Remember, fonts are there to be read, not for pretty decoration.

Another important aspect to improve readability and typography in your app is the spacing between your fonts. Check out our post on the best UX practices for line spacing to learn more!

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 have terrible usability, even 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.

Arch-rivals; to serif or not to serif ?

Before we think about the best fonts for app designs, it’s important to make the distinction between two different styles. These styles are serif and sans-serif.

What a dashing font!

The Oxford Dictionary believes the word serif, to have originated from the 19th-century Deutch word “schreef”, meaning line or dash. With respect to fonts, a serif is a small line attached to the end of a stroke in a letter. Think of names like Times New Roman or Clarendon that everyone knows about.

That’s grotesque!

Conversely, a sans-serif — also known as Grotesque — is a font without serifs, hence “sans”. These fonts include familiar typefaces such as Helvetica, Proxima Nova and Open Sans. Many modern fonts for apps are sans-serif because they increase readability and can scale much more easily. They also tend to clash the least with most UI designs.

How to choose the best fonts for apps

The first thing you should do is disregard most fonts. It sounds drastic, but many fonts for apps that you can find on the internet don’t get widely used in mobile app design. However, 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, 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 frequently in mobile app design. The reason the same fonts keep showing up time after time 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, Proxima Nova!

Waxing technical

When picking out fonts for apps, these questions should help you distinguish a good font against a bad one:

• 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’s the contrast ratio?

If a font has a wide selection of weight, a large x-height and scales well, then it’s likely to work well in most layouts, context permitting.

Less is more

Whichever fonts you do decide on, limit yourself to using just one or two at a time. Sometimes just using one font at various weights can be just as effective as using multiple fonts.

Test, and then test some more

In the Justinmind mockup tool, you can use default and Google Fonts in your designs. They’re easily integrated into the prototyping 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.

With that said, below you’ll find a collection of the best free and paid fonts selected by our design team to get you started! For great fonts to go with numbers, check out our post on the best number fonts.

Best free fonts for apps

1. San Francisco (iOS)

There’s very little you can do to go wrong with San Francisco when choosing the fonts for apps made for iOS. Consistent and legible, this san-serif offers up a friendly voice, and one that’s instantly recognisable by iPhone users.

2. Proxima Nova

Designed by Mark Simonon as the modern world’s slightly toned-down answer to Helvetica, Proxima Nova draws from both Futura and Akzidenz Grotesk.

Many popular apps use this font, including Netflix and Spotify.

3. Lato

Lato is the Polish word for summer, as it was designed in that season in 2010 by Lukasz Dziedzic.

This slender font family supports over 100 latin-based languages and even Greek! It’s sheer versatility alone makes it worthy of consideration.

4. Nexa

Nexa is a typeface that’s straight up simple, while being cutting-edge at the same time.

With 32 font styles and weights, this is one free font for apps that you can rely on in any situation.

5. Open Sans

Another popular font for apps originating from the sans-serif humanist genre, Open Sans is the second most widely-used typeface on Google fonts!

Based on Droid Sans, it works wonders in various types of Android app.

6. Montserrat

Created by Julieta Ulanovsky, Montserrat takes its name from the historical neighborhood in Buenos Aires.

Juleta took inspiration in clear, urban typography that she saw in her native Argentinian town.

7. Playfair Display

Need to design an app with mostly large text and many headings? Then Playfair Display could be what you’re after, as it was originally intended as a display typeface.

Avoid using it in large paragraphs of text or in long passages.

8. Roboto

Roboto was interestingly chosen by Google as the main font for its mobile operating system on Android phones, making it a popular choice as a font for apps.

This neo-grotesque font is the perfect choice for any Android app as it was designed directly in Google’s laboratories!

9. Source Sans

This interesting specimen was designed by Paul D. Hunt for Adobe.

Taking inspiration from fonts such as Franklin, News and Lightline Gothic, Source Sans offers a large x-height and works wonders when using multiple styles variations, especially Italics.

10. Nunito

Similar to Playfair, Nunito is a well-rounded font for apps that was designed with the goal of being used as a display font.

Nunito is quite prolific and you can see it used widely across many mobile apps, as well as across the web.

Best paid fonts for apps

1. Helvetica Now

Legendary Helvetica, designed and developed by Max Miedinger of switzerland was originally intended for use as a realist print font.

Known to have influenced other modern fonts, such as Proxima Nova, there’s very little you can do from a design point of view to go wrong with Helvetica as a font for apps.

• Pricing: from $43

2. Brandon Grotesque

Our designers are adamant that no list of fonts for apps would be complete without Brandon Grotesque.

This structured sans-serif echoes elements of the 1920s and 1930s while working well in modern typography and giving a stylistic edge to legibility.

• Pricing: from $40

3. Gotham

From humble, urban beginnings, Gotham was inspired not by the fictional City in DC Comics, but by New York City.

Taking inspiration from architecture and signage in the city during the mid-20th century, Gotham is a versatile font for app design that offers the user a clear and legible experience without even knowing they’re having one.

• Pricing: requires yearly subscription of $299 to access all fonts

4. Aeonik

Aeonik is a perfect font for apps that require a business-like strictness and rigidity, while at the same time, providing a solid reading experience.

Aeonik comes in seven different weights and is applicable to most latin-script languages.

• Pricing: from $50

5. Sangbleu

SangBleu is a complete typeface with over 45 different styles and five different collections, suitable for both latin and cyrillic alphabets.

SangBleu offers a futurific slant on the typical sans-serif style across mobile apps today.

• Pricing: from $52, $412 for all weights and styles

6. FF Meta

Designed by Erik Spiekermann who is famous for having slated Helvetica as “boring and bland”, he sought to create its perfect arch-nemesis, FF Meta.

Originally intended for use in German Post Offices, FF Meta has grown to be widely loved by designers worldwide.

• Pricing: from $55

7. FF Din

FF DIN is used as an acronym for the German Institute of Standardisation.

It’s slender design gives it an unassuming, inoffensive, yet stylish render.

• Pricing: from $55

8. Avenir Next

When naming this font family, it was clear that Adrian Frutiger had high aspirations for Avenir Next, with Avenir being French for “future”.

When working on this font, Adrian had “human nature in mind” as he worked to create something that enveloped a more organic interpretation of 1920s geometric print.

Pricing: from $108

9. Sabon

If you’re looking for old-school and serif font for apps, you could do a lot worse than Sabon.

Taking inspiration from Garamond, Jan Tschichold sought to create a font that would have a harmonizing effect on the reader.

• Pricing: $43

10. Freight Text

Freight Text is a humanist sans-serif, ideal for use in long passages of text and long paragraphs as it is made with a high degree of readability.

It’s also quite versatile with five different weights to make different combinations possible throughout your app.

• Pricing: from $46

Best fonts for apps — the takeaway

Asking what are the best fonts for apps 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 there is no “best” font for apps. Perhaps, it’s a question of what is the most appropriate given the pre-defined circumstances. And, frankly, isn’t that how all UI/UX design should be?

Originally published at https://www.justinmind.com on April 17, 2020.