Typography

We have a variety of Text components to provide consistent typography throughout the application. You can read more about those specific font styles in the Text component documentation.

Fonts

sans

system-ui, -apple-system, 'Helvetica Neue', sans-serif

Abc-Xyz

mono

'SFMono-Regular', Consolas, Menlo, monospace

Abc-Xyz

display

'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif

Abc-Xyz

body

'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif

Abc-Xyz

Sizes

This typographic sizing scale represents the font-size values used in our components. It loosely follows the Perfect Fourth scale and can be accessed by using t-shirt notation

xs

0.75rem

12px

Abc-Xyz

sm

0.875rem

14px

Abc-Xyz

md

1rem

16px

Abc-Xyz

lg

1.3125rem

21px

Abc-Xyz

xl

1.75rem

28px

Abc-Xyz

2xl

2.3125rem

37px

Abc-Xyz

3xl

3.125rem

50px

Abc-Xyz

4xl

5.625rem

90px

Abc-Xyz

Note that most of our typography components (Text, Heading, Label and others) use capsize to offset the white-space between the cap-height and the line-height. This means that spacing in and around our text will be tight to the characters.

<div className="bg-grey-200 p-8">
  <Text size="xl" className="bg-white">
    Hello World
  </Text>
</div>