Font

Font properties help to create readable and visually appealing experiences across the system. The primitive font scales are built to include consistent increments for size, weight, line height, and letter spacing. Steps from these scales are then used to feed the composite type scale, which in turn, is used to inform the heading and text scale which are applied to designs.

Font family

Token	Value	Sample
font-family/primary	Lato, Arial, sans-serif	Aa
font-family/secondary	Lato, Arial, sans-serif	Aa
font-family/tertiary	ui-monospace, Cascadia Mono, Segoe UI Mono, consolas, Liberation Mono, monospace	Aa

Font sizes

Token	Value	Sample
font-size/50	0.5rem (e.g. 8px)	Aa
font-size/100	0.75rem (e.g. 12px)	Aa
font-size/200	0.875rem (e.g. 14px)	Aa
font-size/300	1rem (e.g. 16px)	Aa
font-size/400	1.125rem (e.g. 18px)	Aa
font-size/500	1.25rem (e.g. 20px)	Aa
font-size/600	1.5rem (e.g. 24px)	Aa
font-size/700	1.75rem (e.g. 28px)	Aa
font-size/800	2rem (e.g. 32px)	Aa
font-size/900	2.25rem (e.g. 36px)	Aa
font-size/1000	2.5rem (e.g. 40px)	Aa
font-size/1100	3rem (e.g. 48px)	Aa
font-size/1200	3.5rem (e.g. 56px)	Aa
font-size/1300	4rem (e.g. 64px)	Aa
font-size/1400	5rem (e.g. 80px)	Aa

Font weights

Token	Value	Sample
font-weight/100	100	Aa
font-weight/200	200	Aa
font-weight/300	300	Aa
font-weight/400	400	Aa
font-weight/500	500	Aa
font-weight/600	600	Aa
font-weight/700	700	Aa
font-weight/800	800	Aa
font-weight/900	900	Aa

Line heights

Token	Value	Sample
line-height/50	0.75 (e.g. 12px)	Aa Aa
line-height/100	0.825 (e.g. 13.2px)	Aa Aa
line-height/200	1 (e.g. 16px)	Aa Aa
line-height/300	1.1 (e.g. 17.6px)	Aa Aa
line-height/400	1.125 (e.g. 18px)	Aa Aa
line-height/500	1.15 (e.g. 18.4px)	Aa Aa
line-height/600	1.2 (e.g. 19.2px)	Aa Aa
line-height/700	1.25 (e.g. 20px)	Aa Aa
line-height/800	1.3 (e.g. 20.8px)	Aa Aa
line-height/900	1.4 (e.g. 22.4px)	Aa Aa
line-height/1000	1.5 (e.g. 24px)	Aa Aa
line-height/1100	1.55 (e.g. 24.8px)	Aa Aa
line-height/1200	1.6 (e.g. 25.6px)	Aa Aa
line-height/1300	2 (e.g. 32px)	Aa Aa

Letter spacing

Token	Value	Sample
letter-spacing/100	-0.05em (e.g. -0.8px)	Aa
letter-spacing/200	-0.025em (e.g. -0.4px)	Aa
letter-spacing/300	0em (e.g. 0px)	Aa
letter-spacing/400	0.025em (e.g. 0.4px)	Aa
letter-spacing/500	0.05em (e.g. 0.8px)	Aa
letter-spacing/600	0.1em (e.g. 1.6px)	Aa
letter-spacing/700	0.15em (e.g. 2.4px)	Aa
letter-spacing/800	0.2em (e.g. 3.2px)	Aa
letter-spacing/900	0.3em (e.g. 4.8px)	Aa