We recommend to use the platform system typeface that adapts to the operating system it runs on.
System typeface by platform
| Platform | Font family |
| iOS | San Francisco |
| Android | Roboto |
| Web | Helvetica Neue |
Font size
iOS
| Style | Size (pt) | |
| Headline | Semibold | 17 |
| Subhead | Medium | 16 |
| Body / Menu | Semibold | 15 |
| Body / Paragraph | Regular | 15 |
| Caption | Regular | 13 |
Android
| Style | Size (pt) | |
| Headline | Medium | 20 |
| Subhead | Regular | 16 |
| Body / Menu | Medium | 14 |
| Body / Paragraph | Regular | 14 |
| Caption | Regular | 12 |
Web
| Style | Size (pt) | |
| Headline | Bold | 22 |
| Body / Menu | Bold | 13 |
| Body / Paragraph | Regular | 12 |
| Caption | Regular | 11 |
Display styles
Headline
Headlines are the largest text on the screen.
Subhead
Subhead are smaller than headlines. They are typically reserved for medium-emphasis text.
Body / Menu
Use the body-menu style for titling those subsections. Don’t use this style for elements that aren’t titles for whole sections of content.
Body / Paragraph
Use this style for body content on the screen.
Caption
Caption is used as help_text for text inputs or subtext such as timestamp.
