Typography

We recommend to use the platform system typeface that adapts to the operating system it runs on.


System typeface by platform

PlatformFont family
iOSSan Francisco
AndroidRoboto
WebHelvetica Neue

Font size

iOS

Style
Size (pt)
HeadlineSemibold
17
SubheadMedium16
Body / Menu
Semibold15
Body / Paragraph
Regular15
CaptionRegular13

Android

Style
Size (pt)
HeadlineMedium
20
SubheadRegular16
Body / Menu
Medium14
Body / Paragraph
Regular14
CaptionRegular12

Web

Style
Size (pt)
HeadlineBold
22
Body / Menu
Bold13
Body / Paragraph
Regular12
CaptionRegular11

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.


Design a site like this with WordPress.com
Get started