Typography

The type scale includes a range of contrasting type-sizes that support the needs of our product and content. Aiming to simplify and unify our product surfaces, we have one consistent type scale that is optimized to provide the best legibility across all screen sizes. The type scale follows t-shirt sizing for a clear and applicable naming structure that does not limit or confuse application.

A single variant is shorthand for a set of typography-specific tokens (font-size, line-height, letter-spacing).

Text XXL
Text XL
Text LG
Text MD
Text SM
Text XS
<Join separator={<Spacer my={0.5} />}>
  <Text variant="xxl">Text XXL</Text>
  <Text variant="xl">Text XL</Text>
  <Text variant="lg-display">Text LG</Text>
  <Text variant="sm-display">Text MD</Text>
  <Text variant="sm">Text SM</Text>
  <Text variant="xs">Text XS</Text>
</Join>

All variants

{
  "xxxl": {
    "fontSize": "102px",
    "lineHeight": "108px",
    "letterSpacing": "-0.01em"
  },
  "xxl": {
    "fontSize": "60px",
    "lineHeight": "70px",
    "letterSpacing": "-0.01em"
  },
  "xl": {
    "fontSize": "40px",
    "lineHeight": "48px",
    "letterSpacing": "-0.01em"
  },
  "lg": {
    "fontSize": "26px",
    "lineHeight": "40px",
    "letterSpacing": "-0.01em"
  },
  "lg-display": {
    "fontSize": "26px",
    "lineHeight": "32px",
    "letterSpacing": "-0.01em"
  },
  "md": {
    "fontSize": "20px",
    "lineHeight": "32px"
  },
  "sm": {
    "fontSize": "16px",
    "lineHeight": "26px"
  },
  "sm-display": {
    "fontSize": "16px",
    "lineHeight": "20px"
  },
  "xs": {
    "fontSize": "13px",
    "lineHeight": "20px"
  },
  "bq": {
    "fontSize": "50px",
    "lineHeight": "60px",
    "letterSpacing": "-0.01em"
  }
}
On this page
All variants