Typography Tokens
Typography tokens to use within swirl.
Font sizes
| Token Name | Value (rem) | Description | |
|---|---|---|---|
Aa | font-size-xs | 0.75 | |
Aa | font-size-sm | 0.875 | Usually used for labels and captions |
Aa | font-size-base | 1 | Usually used for the body, links and buttons |
Aa | font-size-lg | 1.125 | Usually used as level 3 headline |
Aa | font-size-xl | 1.25 | Usually used as level 2 headline |
Aa | font-size-2xl | 1.75 | Usually used as main headline |
Font weights
| Token Name | Value (Weight) | |
|---|---|---|
Aa | font-weight-normal | 400 |
Aa | font-weight-medium | 500 |
Aa | font-weight-semibold | 600 |
Aa | font-weight-bold | 700 |
Line heights
| Token Name | Value (rem) | |
|---|---|---|
Aa Bb | line-height-xs | 1 |
Aa Bb | line-height-sm | 1.25 |
Aa Bb | line-height-base | 1.5 |
Aa Bb | line-height-lg | 1.5 |
Aa Bb | line-height-xl | 1.75 |
Aa Bb | line-height-2xl | 2.25 |
Letter spacings
| Token Name | Value (rem) | |
|---|---|---|
Aa | letter-spacing-normal | 0 |