Typography

This system is meant to act as an additional layer over our existing type tokens, creating a further degree of specificity around how typographic styles should be contextually applied. The goal is for this system to increase overall design consistency for our product as well as to increase efficiency for both the design and engineering teams.

A single variant is shorthand for a set of typography-specific tokens. The text-treatments vary slightly depending on screen size.

Variant
Large (> 767)
Small (< 767)
Example
largeTitle
fontSize
size9
lineHeight
title
letterSpacing
tight
fontWeight
normal
fontSize
size8
lineHeight
title
letterSpacing
tight
fontWeight
normal
All their equipment and instruments are alive
title
fontSize
size7
lineHeight
title
letterSpacing
tight
fontWeight
normal
fontSize
size6
lineHeight
title
letterSpacing
tight
fontWeight
normal
All their equipment and instruments are alive
subtitle
fontSize
size6
lineHeight
title
fontWeight
normal
fontSize
size5
lineHeight
title
fontWeight
normal
All their equipment and instruments are alive
text
fontSize
size3
lineHeight
body
fontWeight
normal
fontSize
size4
lineHeight
body
fontWeight
normal
All their equipment and instruments are alive
mediumText
fontSize
size3
lineHeight
body
fontWeight
bold
fontSize
size4
lineHeight
body
fontWeight
bold
All their equipment and instruments are alive
caption
fontSize
size2
lineHeight
body
fontWeight
normal
fontSize
size3
lineHeight
body
fontWeight
normal
All their equipment and instruments are alive
small
fontSize
size1
lineHeight
body
fontWeight
normal
fontSize
size2
lineHeight
body
fontWeight
normal
All their equipment and instruments are alive

Text extends Box and supports the same set of styled-system props.

All their equipment and instruments are alive
<>
  <Text
    variant="largeTitle"
    py={3}
    px={4}
    bg="purple100"
    color="white100"
    borderRadius={6}
    textAlign="center"
  >
    All their equipment and instruments are alive
  </Text>
</>
Text largeTitle
Text title
Text subtitle
Text text
Text mediumText
Text caption
Text small
<>
  <Text variant="largeTitle">Text largeTitle</Text>
  <Text variant="title">Text title</Text>
  <Text variant="subtitle">Text subtitle</Text>
  <Text variant="text">Text text</Text>
  <Text variant="mediumText">Text mediumText</Text>
  <Text variant="caption">Text caption</Text>
  <Text variant="small">Text small</Text>
</>