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

Abc-Xyz

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

$mono

Abc-Xyz

'SFMono-Regular', Consolas, Menlo, monospace

$display

Abc-Xyz

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

$body

Abc-Xyz

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

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

Hello World

$sm

0.875rem

14px

Hello World

$md

1rem

16px

Hello World

$lg

1.3125rem

21px

Hello World

$xl

1.75rem

28px

Hello World

$2xl

2.3125rem

37px

Hello World

$3xl

3.125rem

50px

Hello World

$4xl

5.625rem

90px

Hello World

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.


<Box css={{ bg: '$tonal100', p: '$5' }}>
  <Text size="xl" css={{ bg: 'white' }}>
    Hello World
  </Text>
</Box>