Design system

Typography

Table of contents


Font

Font tokens tie an intention to a font family.

NameValueDescription
bodygeorgia, Times New Roman, serif--
headlinePostoni, garamond, serif--
metaFranklin, arial, sans-serif--
subheadFranklin, arial, sans-serif--

Font size

Font size tokens are relative to the baseSize. Use font size tokens to define the size of the font.

NameValueCalculatedDescription
0750.75rem12px--
0870.875rem14px--
1001rem16px--
1121.125rem18px--
1251.25rem20px--
1501.5rem24px--
1751.75rem28px--
2002rem32px--
2252.25rem36px--
2502.5rem40px--
2752.75rem44px--
3003rem48px--
3503.5rem56px--
4004rem64px--
4504.5rem72px--
5005rem80px--

Font weight

Font weight tokens define the weight of the font face.

NameValueDescription
bold700--
light300--
regular400--

Line height

Line height tokens are unitless values that define the height of a text element based on its current font size.

NameValueDescription
1001--
1101.1--
1251.25--
1501.5--
1601.6--
1751.75--
2002--
2402.4--