Typography
Families: Inter Display (headlines), Inter (body and UI), Roboto Mono (code). Sizes and line heights are variables with Desktop / Tablet / Mobile values; the text styles below use them.
| Text style | CSS class | Desktop | Tablet | Mobile | Weight | Use for |
|---|---|---|---|---|---|---|
| Headline/Huge | .text-headline-huge |
120/140 | 88/100 | 56/64 | SemiBold | |
| Headline/H1 | .text-headline-h1 |
64/72 | 52/60 | 40/52 | SemiBold | |
| Headline/H2 | .text-headline-h2 |
56/64 | 44/52 | 36/48 | Medium | |
| Headline/H3 | .text-headline-h3 |
40/44 | 36/44 | 32/40 | Medium | |
| Headline/H4 | .text-headline-h4 |
32/40 | 30/40 | 28/36 | Medium | |
| Headline/H5 | .text-headline-h5 |
24/32 | 24/32 | 24/32 | Medium | |
| Headline/H6 | .text-headline-h6 |
20/28 | 20/28 | 20/28 | Medium | |
| Headline/Subtitle | .text-headline-subtitle |
12/20 | 12/20 | 12/20 | Medium | |
| Headline/Overline | .text-headline-overline |
14/20 | 14/20 | 14/20 | Bold | |
| Content/Body leading | .text-content-body-leading |
18/28 | 18/28 | 18/28 | Medium | |
| Content/Body leading bold | .text-content-body-leading-bold |
18/28 | 18/28 | 18/28 | Bold | |
| Content/Body | .text-content-body |
16/24 | 16/24 | 16/24 | Regular | App body copy |
| Content/Body bold | .text-content-body-bold |
16/24 | 16/24 | 16/24 | Semi Bold | |
| Content/Small | .text-content-small |
14/20 | 14/20 | 14/20 | Regular | Most UI text, table cells |
| Content/Small Bold | .text-content-small-bold |
14/20 | 14/20 | 14/20 | Semi Bold | |
| Content/Tiny | .text-content-tiny |
12/16 | 12/16 | 12/16 | Regular | Meta, captions |
| Content/Tiny bold | .text-content-tiny-bold |
12/16 | 12/16 | 12/16 | Medium | |
| Content/Micro | .text-content-micro |
10/12 | 10/12 | 10/12 | Regular | |
| Content/Micro Bold | .text-content-micro-bold |
10/12 | 10/12 | 10/12 | Semi Bold | |
| Components/Button xSmall | .text-components-button-xsmall |
10/12 | 10/12 | 10/12 | Semi Bold | |
| Components/Button Small | .text-components-button-small |
12/16 | 12/16 | 12/16 | Semi Bold | |
| Components/Button Medium | .text-components-button-medium |
14/16 | 14/16 | 14/16 | Semi Bold | |
| Components/Button Large | .text-components-button-large |
16/20 | 16/20 | 16/20 | Semi Bold | |
| Components/Button xLarge | .text-components-button-xlarge |
18/20 | 18/20 | 18/20 | Semi Bold | |
| Components/Input xSmall | .text-components-input-xsmall |
12/12 | 12/12 | 12/12 | Regular | |
| Components/Input Small | .text-components-input-small |
14/16 | 14/16 | 14/16 | Regular | |
| Components/Input Medium | .text-components-input-medium |
15/16 | 15/16 | 15/16 | Regular | |
| Components/Input Large | .text-components-input-large |
18/20 | 18/20 | 18/20 | Regular | |
| Components/Caption xSmall | .text-components-caption-xsmall |
10/12 | 10/12 | 10/12 | Semi Bold | |
| Components/Caption Small | .text-components-caption-small |
12/12 | 12/12 | 12/12 | Medium | |
| Components/Caption Medium | .text-components-caption-medium |
14/16 | 14/16 | 14/16 | Semi Bold | |
| Components/Caption Large | .text-components-caption-large |
16/16 | 16/16 | 16/16 | Semi Bold | |
| Components/Metric value | .text-components-metric-value |
36/44 | 36/44 | 36/44 | Semi Bold | |
| Components/Code | .text-components-code |
14/20 | 14/20 | 14/20 | Regular | |
| Template/Title | .text-template-title |
48/56 | 48/56 | 48/56 | Semi Bold | |
| Template/Heading | .text-template-heading |
24/32 | 24/32 | 24/32 | Semi Bold | Page/drawer titles in app |
| Template/Eyebrow | .text-template-eyebrow |
14/20 | 14/20 | 14/20 | Semi Bold | |
| Web/Display | .text-web-display |
64/72 | 52/60 | 40/52 | Semi Bold | Hero headlines |
| Web/Heading xl | .text-web-heading-xl |
56/64 | 44/52 | 36/48 | Semi Bold | Section titles |
| Web/Heading lg | .text-web-heading-lg |
40/44 | 36/44 | 32/40 | Semi Bold | Large card / split headings |
| Web/Heading md | .text-web-heading-md |
32/40 | 30/40 | 28/36 | Semi Bold | Sub-section titles |
| Web/Heading sm | .text-web-heading-sm |
24/32 | 24/32 | 24/32 | Semi Bold | Card titles, article H2 |
| Web/Heading xs | .text-web-heading-xs |
20/28 | 20/28 | 20/28 | Semi Bold | Small titles, quotes |
| Web/Body lg | .text-web-body-lg |
18/28 | 18/28 | 18/28 | Regular | Lead paragraphs |
| Web/Body | .text-web-body |
16/24 | 16/24 | 16/24 | Regular | Website body copy |
| Web/Eyebrow | .text-web-eyebrow |
14/20 | 14/20 | 14/20 | Semi Bold | Labels above headings |
| Web/Quote | .text-web-quote |
20/28 | 20/28 | 20/28 | Italic |