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.
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.
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:
- Gotham for web/digital properties
- Avenir Next for print
- MCoE guidelines for mobile (default system fonts)
- 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.
Want to learn more? Check out these case studies below:
 |
Actionable Colors Background Exploration for actionable colors for buttons and colors. |
 |
Actionable Colors Recommendation Actionable color recommendations for buttons and colors. |
 |
Actionable Item Controls Best practices for implementing segmented controls and tab bars. Investigating the UI for an item in a “disabled” state. |
 |
Modal Design Exploration of iOS and Android modal designs. |