We use the high-quality system typefaces Roboto and San Francisco Pro for our interfaces. These typefaces include multiple weights and render well across multiple devices and resolutions.
|iOS||San Francisco Pro|
It’s important to note that Apple has two different fonts—SF Pro Text and SF Pro Display—within its San Francisco family that improve readability at specific sizes. These are automatically switched by the OS based on the following font size ranges:
- SF Pro Text: Used for font sizes below 20
- SF Pro Display: Used for font sizes 20 and larger
Be sure to use the appropriate font when designing mockups to ensure the most accurate spacing.
The type scale provides a variety of sizes to allow for flexibility and typographic contrast when styling body and display type. Our type scale includes the following sizes:
Font weight can help add emphasis and content hierarchy when thoughtfully applied. We use the following weights as part of the typographic system:
Italics are available for each weight below 20 px to allow for additional typographic emphasis on body text.
|Light Italic (300)|
|Regular Italic (400)|
|Medium Italic (500)|
|Bold Italic (700)|