Overview

Typography

Roboto was chosen as our primary font for its balance of elegance and robustness. Affording designers and developers with the flexibility to beautifully represent headers, paragraphs, and numbers it's no wonder this sans-serif font is so widely used in the industry.

VariableSize
@text-largest112
@text-larger56
@text-large45
@text-large-medium34
@text-medium24
@text-small-medium20
@text-normal18
@text-small15
@text-smaller13
@text-smallest12

Font weights

VariableExample
@weight-thinAll work no play makes Jack a dull boy.
@weight-lightAll work no play makes Jack a dull boy.
@weight-normalAll work no play makes Jack a dull boy.
@weight-mediumAll work no play makes Jack a dull boy.
@weight-boldAll work no play makes Jack a dull boy.
@weight-ultra-boldAll work no play makes Jack a dull boy.

Usage

Most components will take care of font sizes and font weights. However, in general if you are writing text and it's in a paragraph, use @text-small @weight-light @text-base. Make sure that line-height has been applied as well (it may be applied inherently, but it's always good to check)