Redirecting to default login... Mobile Fonts – System and Custom – Mobility Center of Excellence Team Website

Mobile Fonts – System and Custom

Background

The MCoE recommends utilizing iOS or Android default system fonts when developing a mobile application for simplicity. However, there can be valid reasons to use custom fonts. Fully understanding the impacts of a custom font implementation will requires talking to cross-functional groups including product owners, accessibility experts, developers, and designers.

Font Style Examples

The comparison below shows text in San Francisco, Roboto, Gotham, and Avenir Next fonts. Each font has a different look and feel. The fonts appear to be slightly different sizes even when set as the same size in code.

This image comparison shows text in San Francisco, Roboto, Avenir Next, and Gotham fonts.

The comparison below compares the width of text in and Gotham, San Francisco, and Roboto. Different fonts will display at varying widths, which can affect the amount of content that is visible in a given area.

This image compares the width of text in San Francisco, Roboto, and Gotham fonts.

Areas of Consideration

It is important to consider many implications when selecting a mobile font implementation.

KP Brand

What are the impacts to KP brand when using a system vs custom font?

  • The KP Brand team recommends:
  • MCoE recommends default iOS (San Francisco / SF Pro) and Android (Roboto) system fonts for mobile.

Roll-out out plan

Would users experience inconsistent font experiences?

  • Apps that use web views and have several custom components will be more difficult to fully align on a single font.
  • Will system components such as dialogues, alerts, etc. take on the custom font without additional custom development?
  • How will lists, text paragraphs, buttons, graphs, and all other elements look with the chosen font?

Testing and Validation

How do we ensure that the font selection provides a desirable experience?

  • Will user testing be conducted to see if there is a preference of certain fonts amongst the user population?
  • What is the testing effort on iOS and Android to ensure custom fonts work properly across all supported devices?
    • Android may take more effort to test due to the wide variety of devices and manufacturers.

Accessibility

Is the font choice usable for everyone?

  • Will dynamic fonts and scalability work properly on iOS and Android to allow users to adjust as desired?
  • Will a custom font implementation affect Voice Over functionality in any way?
  • Is the selected font acceptably legible at all sizes?

Due to the wide variety of considerations that must be taken when implementing a custom font, The MCoE recommends utilizing iOS or Android default system fonts for simplicity and consistency across devices.

Implementation Examples

Example of the same design rendered in different fonts.

iOS (SF Pro)

iOS (SF Pro)

Android (Roboto)

iOS (SF Pro)

KP Digital (Gotham)

iOS (SF Pro)


Want to learn more? Check out these case studies below:

Actionable Colors Background Actionable Colors Background
Exploration for actionable colors for buttons and colors.
Actionable Colors Recommendation Actionable Colors Recommendation
Actionable color recommendations for buttons and colors.
Actionable item controls Actionable Item Controls
Best practices for implementing segmented controls and tab bars. Investigating the UI for an item in a “disabled” state.
Modal Design Modal Design
Exploration of iOS and Android modal designs.