It’s no secret that mobile apps are often used on the go. Add to these limitations associated with the screen size, glare from the sun, various visual impairments among users, not always the best screen quality of smartphones and you will get the first ground rule governing the minimum size for body text.

Apple in its Human Interface Guidelines recommends setting the minimum size for Body text to be 17pt.

Google in Material Design guidelines recommends setting the minimum size for Body text to be 16sp (equal to 16pt in iOs)

It’s necessary to take into account that recommendations from systems are given relative to their default fonts. This is currently the Roboto font for Android and San Francisco and New York fonts for iOs. Minimum font size for other typefaces may vary depending on their characteristics. For example, fonts that have very thin strokes require a larger size for body text.

Also, WCAG 2.0 standards recommend following the minimum font size of 18pt and 14pt for Bold text.

The exception may be the various smaller Captions. But keep in mind that if the user cannot read them, it should not greatly affect the user’s interface comprehensibility.

Recommendations

Don’t use a font size less than 16pt for the Body text in your app design. A good size for the body text will be in the range from 16pt to 18pt

🤓 Pro-Tip

To make the typography of your app more accessible in iOs, you can apply Dynamic Type Sizes. Using this technology inside your app will allow users who set an increased or decreased font size in the system settings to see the interface of your app according to these settings.

Headline size

In recent years, it has become very popular to use large headings in digital typography. They look contrasted with the main text and become anchor elements on the page.

But you need to be very careful when using large headers in the mobile apps. Often the use of a large size for headings in mobile apps results in the fact that a headline is stretched to 3–4 lines while contains 1 or 2 words per line. Such headers look messy and are hard to read.

Recommendations

Choose a headline size both contrasting with the body text and fitting on average 2–3 lines.

In some cases, you can use an eyebrow headline to shorten your header.

Contrast

Also of the peculiarities of using mobile apps, your background and text contrast ratio is a very important parameter.

Recommendations

• Follow WCAG 2.0 Contrast Standards
• Make sure that the text you place over images has a sufficient contrast
• Provide two options for placing text on a light and a dark background

Use the Stark plugin (or other same plugins) for Sketch, Adobe XD and Figma or online contrast testing tools to check your text contrast.

System Fonts

Currently, for iOs, you can use two system fonts: San Francisco and New York. And the Roboto font is a system font for Android these days.

System fonts will make the design of your app more consistent with the operating system. But using system fonts only will prevent you from getting a unique look for your app.

Recommendations

The easiest and most common way to add accents and a unique look for the typography of your mobile app is using a system font for the body text and various controls and a non-default font for headings. This combination will always look interesting and fresh.

You can check out one of these sites below to see interesting fonts pairs or check out our font pairing articles.

Typewolf.com
fontinuse.com
Our Free Font Pairing Vol. 1, Vol. 2 and Vol. 3

🤓 Pro-Tip

Note that the Apple system fonts can only be used in Apple ecosystem products (iOs, macOS, etc). While Google’s Roboto font can be used in any operating system. Keep it in mind when designing one app for both platforms.

Baseline

We can often observe a typical situation. Due to the difference in text rendering inside design tools and mobile operating systems, the margins between text blocks and other interface elements may differ visually.

To prevent this from happening, you can consider all margins relative to baseline. This approach will maximize the fit between your layouts and implementation in the app.

*Android currently doesn’t have full support methods for baseline spacings

Recommendations

Most likely, using the baseline for all text elements of your interface will be difficult and costly to develop. Therefore, I recommend using this approach for elements where precise accuracy is especially important.

Whitespace and margins

Mobile devices have a very limited screen size, so you will want to fit as much text as possible within a single visible screen.

You don’t have to sacrifice whitespace to do this by reducing margins between text blocks. This will break the hierarchy between different text styles and blocks and will make the text harder to read.

Recommendations

Compose the layout so that part of the content was above the fold, thereby showing the user that there is more content and encouraging them to scroll.

«Learn the rules like a pro, so you can break them like an artist»

— Pablo Picasso