Categories: Developers / Mobile Apps

A picture may be worth a thousand words, but good typography can really make those words sing. Especially on mobile, where space is limited and fonts get downsized to make room for other visual elements. Poorly thought out typography can mean an app that’s at best annoying and at worst unusable. Clear, responsive and high-contrast text design, on the other hand, makes for a seamless user experience.

Let’s take a look at some typography best practices that developers can employ during mobile app design.

Considering size and space in mobile app design

Clarity is key in mobile app design.

No confusion: clarity is key in mobile app design.

Mobile devices offer far less visual real estate than desktops. Typefaces become smaller, line lengths get reduced and the amount of text on a page changes. It’s harder to process lots of small, cramped type, which means that lots of information gets skipped over. That’s why typography in mobile app design tends to err on the side of brevity.

Type should be large enough to be easily read, and there needs to be enough space between lines to avoid that “cramped” feel. Aim for about 10-20% at the very least, adding more depending on your design and your users. Extra line breaks between paragraphs can help as well. Line length is also a consideration—for the sake of your users, aim for no more than 30-40 characters per line.

Add some color and contrast to your mobile app’s typography

Mobile app design thrives on contrast.

Mobile app design thrives on contrast.

Color can help increase readability for users by breaking up text and highlighting key components. High-contrast is generally seen as a good thing, although note that some combinations may cause eye strain or may be difficult for those with low vision or vision disorders. Consider also that mobile users are likely to be using an app outside or in places with less than idea lighting conditions.

W3C offers usability guidelines for typography contrast that are a good starting point. A 4.5:1 text to background ratio is the recommended minimum for small text, and 3:1 for larger text. Don’t forget to user test your color and contrast choices to ensure that they’re easily readable by your target users.

Be kind to your users’ eyes and allow for text size changes

Users shouldn't need help to read your text.

Users shouldn’t need help to read your text.

Mobile app users can set their text size preferences under their phone’s settings. Apps that support Dynamic Type will adjust their font size accordingly. While supporting Dynamic Type is a great accessibility choice, don’t forget to test your app for readability at all text sizes. For example, massively increasing the size of type means more space taken up on the page. This can have a knock-on effect for the overall user experience.

Something to bear in mind is that not all text blocks need to drastically change size. A heading or timestamp information may be able to remain the same without interfering with the user experience, for example. On the other hand, informational text that needs to be read—for example an email or some instructions—should adjust to suit the user’s needs.

Legibility at all sizes and font types is a must

While mix of serif and sans is often used to help create contrast in print, it’s best to stick with a single typeface on mobile. Use weight and size to create contrast and interest—not multiple fonts.

When picking your typeface, aim for clarity and legibility. Ensure that it’s legible at its smallest size, and when bolded, italicized or underlined. Avoid using light or bold weighted typefaces for body text, and ensure that portions of text don’t overlap or get cut off as the type size changes. Finally, ensure that each character is easily distinguishable from others. For example, it’s easy to confuse a zero for an uppercase O, and a capital I and a lowercase L can also look similar.

Typography is a key part of user-friendly mobile app design. It plays into aesthetics, the user interface and the overall user experience. As always, design with your user in mind, and cater to their needs.

If you enjoyed this post, please consider sharing it using the buttons below.

Touchtap is a mobile development agency specializing in mobile development. Learn how to get mobile applications developed.

Back to Posts