Typography
Rules of typesetting throughout the system.
Usage
Our typography styles can be consumed as Tailwind classes. The classes below pre-set a combination of font-size, line-height, letter-spacing, and font-weight for you based on the Geist Core Figma system.
To make use of the Subtle and Strong modifiers, all you have to do is use the <strong> element nested as the descendant of a given typography class:
<p className="text-copy-16"> Copy 16 <strong>with Strong</strong></p>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 | text-heading-32 | Marketing subheadings, paragraphs, and dashboard headings. |
Heading 24 with Subtle | text-heading-24 | — |
Heading 20 with Subtle | text-heading-20 | — |
Heading 16 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 given ample line-height for highlighting & marrying up with icons.
Example | Class name | Usage |
|---|---|---|
Label 20 | text-label-20 | Marketing text. |
Label 18 | text-label-18 | — |
Label 16 with Strong | text-label-16 | Used in titles to help differentiate from regular |
Label 14 with Strong | 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) | 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 | 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 multiple lines of text, having a higher line height than Label.
Example | Class name | Usage |
|---|---|---|
Copy 24 with Strong | text-copy-24 | For hero areas on marketing pages. |
Copy 20 with Strong | text-copy-20 | For hero areas on marketing pages. |
Copy 18 with Strong | text-copy-18 | Mainly for marketing, big quotes. |
Copy 16 with Strong | text-copy-16 | Used in simpler, larger views like Modals where text can breathe. |
Copy 14 with Strong | 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. |
Was this helpful?