Mobile App Design: Part 4

Understanding Typography

Font:

Choosing the right font for a mobile application is a very important decision. It influences how a user will perceive the app, and it also defines the uninstall rate. Fonts represent what a dress represents for a human being. A visual first impression which the user will make and which will remain unchanged.

Most platforms have their own system fonts for instance San Francisco (SF) is the system typeface in iOS and Roboto is the standard typeface on Android. Noto is the standard typeface for all languages not covered by Roboto.

Sticking to these works in most cases, unless and until you want to express a unique style for your brand, But you can use these guidelines as a template in defining your type.

Size and Space:

For mobile typography size and space are the important factor. Few tips for achieving the best readability are,

For iOS, use text size that’s at least 11 points, while for Android, choose 14 sp for main text.
Use 30–40 characters per line for mobile.
Higher the contrast it is more better.

iOS Guidelines Sheet:

iOS Typography Guidelines

Android Guideline Sheet:

Android Typography Guidelines

Color & Contrast:

Color helps us to achieve the right contrast, else it might be a head ache to user. Use correct colour combinations. Black over white works better in most cases, but use dark grey instead of pure black. Text should maintain a minimum contrast ratio of at least 4.5:1 (calculated based on luminance values) for legibility. A ratio of 7:1 is preferred. Google’s material guidelines has a quick cheatsheet to achieve this contrast.

Next in the series Mobile App Design: Part 5( Exploring the default component sheet)