Large title 34 px
Title 1 28 px
Title 2 22 px
Title 3 20 px
Headline 17 px
Body 17 px
Large title 34 px
Title 1 28 px
Title 2 22 px
Title 3 20 px
Headline 17 px
Body 17 px
Developer guidelines
Typography
The font
Use the system font stack:
font-family: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
It shows Apple’s font on Apple devices and the device’s own font everywhere else. Never host or ship Apple’s SF Pro font files yourself: Apple’s licence does not allow it on the web.
Sizes
Large title. 34 px on 41 px lines, Bold.
Title 1. 28 px on 34 px lines, Bold.
Title 2. 22 px on 28 px lines, Bold.
Title 3. 20 px on 25 px lines, Semibold.
Headline. 17 px on 22 px lines, Semibold.
Body. 17 px on 22 px lines, Regular.
Subhead. 15 px on 20 px lines, Regular.
Footnote. 13 px on 18 px lines, Regular.
Caption. 12 px on 16 px lines, Regular.
The numbers come from Apple’s points, and on the web each one is a CSS pixel: write 17px, never 17pt (CSS points are a third bigger). Body text is 17px. Nothing is ever smaller than 11px.
Weight and size
Weights. Regular, Medium, Semibold or Bold. Never Ultralight, Thin or Light.
Hierarchy. Show it with size, weight and colour, never with a second typeface.
Bigger text. Layouts survive text zoomed to 200%: rows grow and stack, nothing clips.
Do and don’t
Your video is ready. It is in your Switch library.
Your video is ready. It is in your Switch library.
Do. 17px body in the system font, Regular weight.
Your video is ready. It is in your Switch library.
Your video is ready. It is in your Switch library.
Don’t. Tiny, thin text, or a different typeface for Switch content.