Skip to Content

Typography

Typography tokens are used to manage content display and scale.


Tokens

Tokens

To manage Typography tokens, the theme object supports the following keys:

  • fonts (font families)
  • fontSizes
  • fontWeights
  • lineHeights

Typography scale

Typography scale

Try to edit the preview

TokenPreviewSpecs
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