August 6, 2018 Rules and Trends of Modern Mobile Typography in App Design

Want to make your app irresistible? Then you’d better have a spot-on UI and clean UX. There are lots of factors that make up UI and UX, but one of the biggest — yet often forgotten — is typography. And today, we are living in a mobile world where many prefer or only have a mobile device, proven by the fact that there were 197 billion mobile app downloads in 2017. While apps get lots of downloads, they don’t always stick around. Lack of storage is one big reason apps get deleted; another is the experience. App designers have only had 10 years to perfect everything. (The world of mobile apps turns 10 this summer!) And much has changed in these 10 years, as now the vast majority of people in the world own a smartphone.

So how or why does typography matter in the world of app design?

Typography works as both a functional part of the app and an aesthetic one. Typography is much more than a font choice — it’s the technique of arranging written words to be readable and legible as well as interesting. When discussing topography, it’s just about everything: typefaces, sizes, leading, letter-spacing, and kerning. Typography is both art and science. Think about how you look at an app. Every detail has to be just right because the real estate is small. That’s the challenge with mobile typography. Let’s start by looking at some of the rules of modern mobile typography.

Fonts should match your content

Fonts have attributes. They can be straight and thick or curvy and thin. These differences in fonts make some better suited for certain content. If your app leads with bright colors and a delicate feel, it would make more sense to use curvy over straight. However, you can’t choose fonts that are overly adorned on such small screens. It’s a balance of style and legibility. Fonts should also differ between headers and body copy. This signals to the user that this is a hierarchy and that the information is different. This can help when people scan rather than read.

The size should make sense

As you know, you’ve got a small space, but that doesn’t mean every word should be so tiny that it’s hard to see even when you zoom in. Such tiny text may be impossible to read — in which case users will delete your app. With the current size of the iPhone and Android phones, you should be able to use at least an 11-point font.

Tighten leading for the best mobile UI

You have a smaller screen, so your leading will be smaller as well and should also be tightened for mobile screens. Leading that’s too wide or narrow can ruin mobile UI, so pay close attention to the space. The rule of thumb is that your leading should be 120% of the size of the font.

Line lengths: What’s the right limit?

On desktop, the line of text is much wider than mobile, but what makes the line the right length for an app? The line length, font size, and number of characters are all interconnected. When they are all in alignment, then the UI is easily readable. You can see the difference if you look at lines that are about 30 characters versus 60. At 60, the words are too close together, making it hard to take in any information.

White space is still your friend

White space is a prominent feature in digital design. White space gives copy room to breathe. It’s no different on mobile. The areas of white space available in your app are much fewer though. There’s the space between the lines, the margins, and paragraphs. That’s all the room you have to work with inside app design. Make the most of it so that the really important words, like headers and subheaders, have space.

Hierarchy helps users organize information

Hierarchy is an important part of any size screen design. For bigger screens, you may have three to four different levels. Mobile hierarchy is typically only going to have two levels: a headline and body. Two levels also keep the UI clean and inform the user of what’s most important.

Contrast and color

Another way to master the app interface is with contrast. However, for mobile, the rules are a bit different because the screens are small. Too much contrast between light and dark can cause the font to look distorted. Font size matters in contrast too. If the font size is big enough, like 11- or 14-point, then dark font on a light background (or vice versa) is fine. But don’t think you are relegated to just black and white. In that sense, many apps make good use of grays and blues.

Kerning and tracking

These terms deal with the space between letters. Kerning is the space between each letter in a word, and tracking deals with letter spacing of all characters. Kerning and tracking can be optimized for better readability. Some letters need more space in a word for it to be readable. Font style affects this too.

From rules to trends

These all represent the current rules of mobile typography. Now let’s take a look at trends emerging this year. Mobile app designers are taking cues from Apple and Google, both of which put out clean, legible, and attractive typography on mobile. So what are other app designers learning from these leaders?

• Loud, bold titles — which add a touch of personality to the app.
• Minimalism of type. Not every app needs a lot of words, but minimalism doesn’t mean dull, rather it gives the designer the ability to play with color in the text.
• Font weights — to highlight information and show contrast.

Find mobile typography experts for your app at Topcoder

Typography can make all the difference in your app design. When you work with app designers, make sure they have a tight grasp on mobile typography. Otherwise, your app’s UI could be at risk for disaster. But where can you find the best mobile typography experts that design apps for some of the world’s biggest brands? They’re part of the Topcoder Community. And they’re ready to help you design or improve your app — whether it’s for a fitness brand, company-wide IT service requests, or something else entirely.