Typography
We consider typography to be one of the most important aspects of our design system. We use typography to present designs and content as clearly and efficiently as possible.
See our typography guidelines to understand how we use typography.
Sizes
| Token | Value | Example |
|---|---|---|
fontXSmall (Deprecated) | 10px | Telescope |
fontSmall | 12px | Telescope |
fontMedium | 14px | Telescope |
fontLarge | 16px | Telescope |
fontXLarge | 18px | Telescope |
font2XLarge | 20px | Telescope |
font3XLarge | 24px | Telescope |
font4XLarge | 32px | Telescope |
font5XLarge | 48px | Telescope |
Usage
import {tokens} from '@pleo-io/telescope'const element = styled.div`font-size: ${tokens.fontMedium};`
Weights
| Token | Weight | Example |
|---|---|---|
fontWeightRegular | 400 | Aa |
fontWeightMedium | 500 | Aa |
fontWeightSemibold | 600 | Aa |
fontWeightBold | 700 | Aa |
Usage
import {tokens} from '@pleo-io/telescope'const element = styled.div`font-weight: ${tokens.fontWeightRegular};`
Line heights
| Token | Value | Example |
|---|---|---|
lineHeight1 | 1.4 | Telescope |
lineHeight2 | 1.6 | Telescope |
lineHeight3 | 1.7 | Telescope |
Usage
import {tokens} from '@pleo-io/telescope'const element = styled.div`line-height: ${tokens.fontLineHeight1};`