Go Back

Typography

Typography is the skillful arrangement of type to naturally establish hierarchy within the user interface.

Heading

Text Token	Weight	Size (px)	Line height (px)
heading-6xl	Semibold 600	60px	72px
heading-5xl	Semibold 600	48px	56px
heading-4xl	Semibold 600	36px	44px
heading-3xl	Semibold 600	30px	38px
heading-2xl	Semibold 600	24px	32px
heading-xl	Semibold 600	20px	30px
heading-lg	Medium 500	18px	28px
heading-md	Medium 500	16px	24px
heading-sm	Medium 500	14px	20px

Body

Text Token	Weight	Size (px)	Line height (px)
body-lg	Regular 400	18px	28px
body-lg | medium	Medium 500	18px	28px
body-md	Regular 400	16px	24px
body-md | medium	Medium 500	16px	24px
body-md | underline	Medium 500	16px	24px
body-sm	Regular 400	14px	20px
body-sm | medium	Medium 500	14px	20px
body-sm | underline	Medium 500	14px	20px
body-sm | uppercase	Regular 400	14px	20px
body-xs	Regular 400	12px	16px
body-xs | medium	Medium 500	12px	16px
body-xs | underline	Medium 500	12px	16px
body-xs | uppercase	Regular 500	12px	16px
body-2xs	Regular 400	10px	16px
body-2xs | medium	Medium 500	10px	16px
body-2xs | uppercase	Regular 500	10px	16px