Typography
Geist typography playground
Test every Geist text utility in one place. These classes combine font-size, line-height, letter-spacing, and font-weight for headings, buttons, labels, and copy.
Each "with Subtle/Strong" variant uses a <strong> tag nested inside the text element.
Headings
Used to introduce pages or sections.
| Example | Class name | Usage |
|---|---|---|
Heading 72 | text-heading-72 | Marketing heroes. |
Heading 64 | text-heading-64 | — |
Heading 56 | text-heading-56 | — |
Heading 48 | text-heading-48 | — |
Heading 40 | text-heading-40 | — |
Heading 32 with Subtle with Subtle | text-heading-32 | Marketing subheadings, paragraphs, and dashboard headings. |
Heading 24 with Subtle with Subtle | text-heading-24 | — |
Heading 20 with Subtle with Subtle | text-heading-20 | — |
Heading 16 with Subtle with Subtle | text-heading-16 | — |
Heading 14 | text-heading-14 | — |
Buttons
Only to be used within components that render buttons.
| Example | Class name | Usage |
|---|---|---|
| text-button-16 | Largest button. | |
| text-button-14 | Default button. | |
| text-button-12 | Only used when a tiny button is placed inside an input field. |
Label
Designed for single-lines and pairing with icons.
| Example | Class name | Usage |
|---|---|---|
Label 20 | text-label-20 | Marketing text. |
Label 18 | text-label-18 | — |
Label 16 with Strong with Subtle | text-label-16 | Used in titles to help differentiate from regular |
Label 14 with Strong with Subtle | text-label-14 | Most common text style of all. Used in many menus. |
Label 14 Mono | text-label-14-mono | Largest form of mono, to pair with larger (>14) text. |
Label 13 with Strong, and Tabular (123) with Subtle | text-label-13 | Used as a secondary line next to other labels. Tabular is used when conveying numbers for consistent spacing. |
Label 13 Mono | text-label-13-mono | Used to pair with Label 14, as the smaller mono size looks better in that pairing. |
Label 12 with Strong, AND CAPS with Subtle | text-label-12 | Used for tertiary level text in busy views, like Comments, Show More and the capitals in Calendars. |
Label 12 Mono | text-label-12-mono | — |
Copy
Designed for multi-line text with comfortable line heights.
| Example | Class name | Usage |
|---|---|---|
Copy 24 with Strong with Subtle | text-copy-24 | For hero areas on marketing pages. |
Copy 20 with Strong with Subtle | text-copy-20 | For hero areas on marketing pages. |
Copy 18 with Strong with Subtle | text-copy-18 | Mainly for marketing, big quotes. |
Copy 16 with Strong with Subtle | text-copy-16 | Used in simpler, larger views like Modals where text can breathe. |
Copy 14 with Strong with Subtle | text-copy-14 | Most commonly used text style. |
Copy 13 | text-copy-13 | For secondary text and views where space is a premium. |
Copy 13 Mono | text-copy-13-mono | Used for inline code mentions. |