Typography
Font
Heading
--grapes-heading-m
The quick brown fox jumps over the lazy dog--grapes-heading-l
The quick brown fox jumps over the lazy dog--grapes-heading-xl
The quick brown fox jumps over the lazy dog--grapes-heading-xxl
The quick brown fox jumps over the lazy dogTitle
--grapes-title-s
The quick brown fox jumps over the lazy dog--grapes-title-m
The quick brown fox jumps over the lazy dog--grapes-title-l
The quick brown fox jumps over the lazy dog--grapes-title-xl
The quick brown fox jumps over the lazy dog--grapes-title-xxl
The quick brown fox jumps over the lazy dogBody
--grapes-body-s
The quick brown fox jumps over the lazy dog--grapes-body-m
The quick brown fox jumps over the lazy dog--grapes-body-l
The quick brown fox jumps over the lazy dog--grapes-body-xl
The quick brown fox jumps over the lazy dog--grapes-body-xxl
The quick brown fox jumps over the lazy dogUsage in CSS
Whenever you want to apply this style to text, you can use the corresponding placeholder.
.myBodyClass {
font: var(--grapes-body-m);
}
.myTitleClass {
font: var(--grapes-title-m);
}
.myHeadingClass {
font: var(--grapes-heading-m);
}
Usage in TailwindCSS
Whenever you want to apply a typography style to the block element, you can use the corresponding className.
| TailwindCSS className | CSS equivalent |
|---|---|
heading-m | font: var(--grapes-heading-m) |
heading-l | font: var(--grapes-heading-l) |
heading-xl | font: var(--grapes-heading-xl) |
heading-xxl | font: var(--grapes-heading-xxl) |
title-s | font: var(--grapes-title-s) |
title-m | font: var(--grapes-title-m) |
title-l | font: var(--grapes-title-l) |
title-xl | font: var(--grapes-title-xl) |
title-xxl | font: var(--grapes-title-xxl) |
body-s | font: var(--grapes-body-s) |
body-m | font: var(--grapes-body-m) |
body-l | font: var(--grapes-body-l) |
body-xl | font: var(--grapes-body-xl) |
body-xxl | font: var(--grapes-body-xxl) |
Advanced Usage
Font Size
| Token | Value |
|---|---|
| --grapes-font-size-12 | 12px |
| --grapes-font-size-14 | 14px |
| --grapes-font-size-16 | 16px |
| --grapes-font-size-20 | 20px |
| --grapes-font-size-24 | 24px |
| --grapes-font-size-32 | 32px |
| --grapes-font-size-40 | 40px |
Line Height
| Token | Value |
|---|---|
| --grapes-lh-16 | 16px |
| --grapes-lh-20 | 20px |
| --grapes-lh-24 | 24px |
| --grapes-lh-32 | 32px |
Font Families
| Token | Value |
|---|---|
| --grapes-ff-base | 'Inter', Helvetica, sans-serif |
| --grapes-ff-heading | 'Roobert', Helvetica, sans-serif |
Font Weight
| Token | Value |
|---|---|
| --grapes-fw-medium | 500 |
| --grapes-fw-semibold | 600 |