Mobile: Typography (fonts)

Context

The second step in the process of defining a visual style of a Mobile White Label Application is choosing the right fonts.
Please note: the first one is defining Colors. Check this article to know more :)

You can choose the fonts from the Google Fonts library or you can use your own custom/premium brand fonts.

The font family should contain three different font weights (i.e. Regular, Semibold & Bold), so they can be properly used across the whole application.

Fonts cover all text elements of the Mobile interface such as titles, call to action buttons, and all descriptive text that your customers will use to navigate through the app. In order to avoid potential readability issues, make sure that the readability of the fonts you’re choosing is clear.

Font requirements:

• File format: OTF or TTF
• Font with three different font weights (i.e.: Regular, Semibold & Bold)
• Additional font for Headings with one font weight (i.e.: Bold) if necessary (Optional)
• Additional font for Buttons with two different font weights (i.e.: Regular and Bold) if necessary (Optional)
• License

Typography preview

Fonts selection and formatting tips

Headings

Use these for large headings typically at the top of a page or as a starting point of a section.

Recommended weight: Bold

Body

Most-used style, usually for all texts that are smaller in size, full sentences, titles, links and paragraphs.

Recommended weight: Regular, Semibold and Bold

Buttons

Defines a default font family for primary, info, and secondary buttons.

Please note: Button font can only be defined through the Customization Center if you decide to enable Styles. If not, we will use the Body font.

Recommended weight: Bold, Regular

In addition: You cannot change font properties like font size, letter spacing (kerning), paragraph spacing, and line height.