Typography
The type scale, from 34 down to 12.
Draft
The values shown here are conceptual and may change.
Each style sets a font size, a line height and a weight together. The names and sizes follow the iOS text styles.
largeTitle
Your changes are saved
34/41 · 700
title1
Your changes are saved
28/34 · 700
title2
Your changes are saved
22/28 · 700
title3
Your changes are saved
20/25 · 600
headline
Your changes are saved
17/22 · 600
body
Your changes are saved
17/22 · 400
callout
Your changes are saved
16/21 · 400
subheadline
Your changes are saved
15/20 · 400
footnote
Your changes are saved
13/18 · 400
caption
Your changes are saved
12/16 · 400
export const typography = {
largeTitle: { fontSize: 34, lineHeight: 41, fontWeight: "700" },
title1: { fontSize: 28, lineHeight: 34, fontWeight: "700" },
title2: { fontSize: 22, lineHeight: 28, fontWeight: "700" },
title3: { fontSize: 20, lineHeight: 25, fontWeight: "600" },
headline: { fontSize: 17, lineHeight: 22, fontWeight: "600" },
body: { fontSize: 17, lineHeight: 22, fontWeight: "400" },
callout: { fontSize: 16, lineHeight: 21, fontWeight: "400" },
subheadline: { fontSize: 15, lineHeight: 20, fontWeight: "400" },
footnote: { fontSize: 13, lineHeight: 18, fontWeight: "400" },
caption: { fontSize: 12, lineHeight: 16, fontWeight: "400" },
} satisfies Typography;Usage
Title and Text map their props onto these styles, so you rarely read them directly:
<Title level={1}>Settings</Title> // largeTitle
<Text>Saved automatically.</Text> // bodyTo use a custom font, add fontFamily to the styles.