Skip to main content

Typography

Bento type scale organizes styles into five roles, semantically named to describe their purposes:

  • Display: reserved for short, important text or numerals. Usually, they work best on large screens.
  • Headline: best suited for short, high-emphasis text. These styles can be suitable for marking primary text passages or important content regions.
  • Title: used to divide secondary text passages or content regions.
  • Body: used for longer passages of text and paragraphs.
  • Label: utilitarian styles used for text inside of components or very small supporting text in the content body, like captions.

Usage​

You can use any of the typography components like this:

Hello, world! (Display)Hello, world! (Headline)Hello, world! (Title)
Hello, world! (Label)
Hello, world! (Body)
<Stack space={16}>
  <Display size="large">Hello, world! (Display)</Display>
  <Headline size="large">Hello, world! (Headline)</Headline>
  <Title size="large">Hello, world! (Title)</Title>
  <Label size="large" color="primary">
    Hello, world! (Label)
  </Label>
  <Body size="large">Hello, world! (Body)</Body>
</Stack>

Font weight​

All typography components support a single (configurable) font weight, with the exception of Body, which has two weights: "default" and "strong".

"default" is the default weight, and "strong" is a heavier weight that can be used to emphasize certain parts of the text.

Hello, world! (Body default)Hello, world! (Body strong)
<Stack space={16}>
  <Body size="large">Hello, world! (Body default)</Body>
  <Body size="large" weight="strong">
    Hello, world! (Body strong)
  </Body>
</Stack>

Truncation​

All typography components support an optional ellipsis prop (defaulted to false), which causes the text to be truncated with an ellipsis when it overflows its container.

Very long string which will NOT be truncated.
Very long string which WILL be truncated.
<Stack space={16}>
  <Box
    style={{
      width: 200,
    }}
    background="softIndigo"
    padding={8}
  >
    <Body size="large">Very long string which will NOT be truncated.</Body>
  </Box>
  <Box
    style={{
      width: 200,
    }}
    background="softIndigo"
    padding={8}
  >
    <Body size="large" ellipsis>
      Very long string which WILL be truncated.
    </Body>
  </Box>
</Stack>

This feature uses standard CSS, so the truncation will be accessible (the entire text is still visible in the DOM node) and standard browser feature work as expected (e.g. try copy-pasting the truncated text and you'll see you'll get the full text).

Semantic HTML​

All typography components render as <span> by default. This behavior can be customized using the optional as prop.

For example, you may want to render Body as a <p>:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<Body as="p" size="large" align="center">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</Body>

Another example is using Title as a <h2>:

A title which is rendered as <h2>

<Title as="h2" size="large">{`A title which is rendered as <h2>`}</Title>

Localization and rich formatting​

Typography components accept either a LocalizedString (see Type-safe localization) or a complex React Node as children.

If you need rich formatting, you can typically rely on the localization library you are using to create a React children node.

For example, if you are using react-i18next, you can use the Trans component to create a React node:

<Body size="medium">
  <Trans i18nKey="My.Localization.Key" />
</Body>

where the string matching My.Localization.Key can be along the lines of Hello <b>World</b>!

You can read more about Trans component in the official react-i18next documentation