Typography
Our design system leverages a purposeful set of typographic styles. We’ve stress-tested this typographic scale across dozens of projects to make sure it’s robust enough to use across (almost) any project, while remaining as accessible as possible for everyone.
Font Family
Our design system use two font families, Inter and Poppins.
| Name | Value |
|---|---|
inter | Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
poppins | Poppins, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
sans | Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
mono | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace |
serif | ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif |
Control the font family of an element using the font-{name} utilities.
font-sans
The quick brown fox jumps over the lazy dog.
font-mono
The quick brown fox jumps over the lazy dog.
font-serif
The quick brown fox jumps over the lazy dog.
font-inter
The quick brown fox jumps over the lazy dog.
font-poppins
The quick brown fox jumps over the lazy dog.
Font Size
| Name | Size (rem) | Size (pixel) | Line Height (rem) |
|---|---|---|---|
| xs | 0.75 | 12 | 1.125 |
| sm | 0.875 | 14 | 1.25 |
| md | 1 | 16 | 1.5 |
| lg | 1.125 | 18 | 1.75 |
| xl | 1.25 | 20 | 1.875 |
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Font Weight
| Class | Properties |
|---|---|
font-regular | font-weight: 400; |
font-medium | font-weight: 500; |
font-semibold | font-weight: 600; |
font-bold | font-weight: 700; |
Setting the font weight
Control the font weight of an element using the font-{weight} utilities.
font-regular
The quick brown fox jumps over the lazy dog.
font-medium
The quick brown fox jumps over the lazy dog.
font-semibold
The quick brown fox jumps over the lazy dog.
font-bold
The quick brown fox jumps over the lazy dog.
Font Display
A display text style is intended for use at large sizes for headings, rather than for extended passages of body text.
As a general rule, “text” styles should be used for the majority of informational copy (body, labels, UI elements) and small sizes in user interfaces, while larger “display” styles should be reserved for headings (H1-H6).
| Class | Properties | Pixels |
|---|---|---|
text-display-xs | font-size: 1.5rem; | 24px |
text-display-sm | font-size: 1.875rem; | 30px |
text-display-md | font-size: 2.25rem; | 36px |
text-display-lg | font-size: 3rem; | 48px |
text-display-xl | font-size: 3.75rem; | 60px |
text-display-2xl | font-size: 4.5rem; | 72px |
Setting the Display
Control the text style of an element using the font-display-{size} utilities.
font-display-xs
Lorem ipsum.
font-display-sm
Lorem ipsum.
font-display-md
Lorem ipsum.
font-display-lg
Lorem ipsum.
font-display-xl
Lorem ipsum.
font-display-2xl
Lorem ipsum.