Font Size

Base size: --font-size-base = 40px

CSS Variable Value px
--font-size-3xs 0.5em 20px
--font-size-xxs 0.6em 24px
--font-size-xs 0.7em 28px
--font-size-s 0.85em 34px
--font-size-m 1em 40px
--font-size-l 1.15em 46px
--font-size-xl 1.3em 52px
--font-size-xxl 2em 80px
--font-size-3xl 2.5em 100px
scss/canvas/token/_typography.scss

Font Size Preview

3XS (0.5em / 20px)
XXS (0.6em / 24px)
XS (0.7em / 28px)
S (0.85em / 34px)
M (1em / 40px)
L (1.15em / 46px)
XL (1.3em / 52px)
XXL (2em / 80px)
scss/canvas/token/_typography.scss

Font Weight

CSS Variable Value
--font-weight-normal 400
--font-weight-bold 700
--font-weight-black 900
Normal (400)
Bold (700)
Black (900)
scss/canvas/token/_typography.scss

Line Height

CSS Variable Value
--line-height-tight 1.2
--line-height-normal 1.45
--line-height-loose 2
scss/canvas/token/_typography.scss

Line Height Preview

Tight (1.2)
Line height is compressed. Suitable for headings.
Normal (1.45)
Standard line height. Suitable for body text.
Loose (2)
Expanded line height. Suitable for lists.
scss/canvas/token/_typography.scss