Typography
Typography tokens are used to manage content display and scale.
Tokens
TokensTo manage Typography tokens, the theme object supports the following keys:
- fonts (font families)
- fontSizes
- fontWeights
- lineHeights
Typography scale
Typography scaleTry to edit the preview
| Token | Preview | Specs | |
|---|---|---|---|
| text | |||
text-xs | Backyard UI | font-size 10px line-height 15px font-weight normal | |
text-sm | Backyard UI | font-size 12px line-height 18px font-weight normal | |
text-md | Backyard UI | font-size 13px line-height 19px font-weight normal | |
text-lg | Backyard UI | font-size 16px line-height 24px font-weight normal | |
text-xl | Backyard UI | font-size 18px line-height 27px font-weight normal | |
text-2xl | Backyard UI | font-size 22px line-height 33px font-weight normal | |
text-3xl | Backyard UI | font-size 24px line-height 36px font-weight normal | |
text-4xl | Backyard UI | font-size 28px line-height 42px font-weight normal | |
text-5xl | Backyard UI | font-size 36px line-height 54px font-weight normal | |
text-6xl | Backyard UI | font-size 42px line-height 63px font-weight normal | |
| heading | |||
heading-xs | Backyard UI | font-size 13px line-height 16px font-weight semibold | |
heading-sm | Backyard UI | font-size 16px line-height 19px font-weight semibold | |
heading-md | Backyard UI | font-size 18px line-height 22px font-weight semibold | |
heading-lg | Backyard UI | font-size 22px line-height 26px font-weight semibold | |
heading-xl | Backyard UI | font-size 24px line-height 29px font-weight semibold | |
heading-2xl | Backyard UI | font-size 28px line-height 34px font-weight semibold | |
heading-3xl | Backyard UI | font-size 36px line-height 43px font-weight semibold | |
heading-4xl | Backyard UI | font-size 42px line-height 50px font-weight semibold | |