Type scale in mobile app UI design

ype scale is an important part of reading and understanding the text we see. It is defined as the progression of font sizes in the text we read and tends to be standard across a website or an app. In this blog post, we’ll take a look at a few examples of type scales and the best practices we can adopt when implementing them.

Why do UI designers need type scales?

For one, to make their lives and work easier. This method helps UI designers standardise font sizes across a project and achieve harmony based on a ratio. This way, UI designers can choose a base size for their paragraph text and work out the heading sizes using a scale. However, the most important feature of a type scale is that it helps achieve a visual balance in the text hierarchy. Instead of assigning random sizes to each heading, designers can multiply the base size of their paragraph text by a ratio to arrive at the optimal size for it.

 

What base size should I choose for my app’s type scale?

As the two most popular app stores, Apple and Google have set out their own recommendations based on the default fonts they use. For iOS, these are San Francisco and New York, whereas the default font for Android is Roboto.

In their Human Interface Guidelines, Apple outline many useful guidelines for using their default fonts and recommend 17pt as a base body text size. The Human Interface Guidelines also offer resources and advice on how to apply iOS’ Dynamic Type Sizes. This tool lets app users control the font size from within their phone settings and helps apps reflect that size throughout.

Google, on the other hand, has created a type scale UI designers can use to create their designs as a part of its Material Design resources. It offers an interactive tool where users can select a google font and automatically generate a scale for it. To illustrate, in their example type scale for Roboto, Google suggest using 16pt or 14pt for the body text.

Useful type scale resources

There are a lot of great articles and tools on the internet that can help designers use and understand type scales. Here are a few of our favourites:

See more of our blog posts