Text

This component should be used as a wrapper for every single text to ensure that every text follows the design system and that we can easily make style adjustments later on without the need for large refactors.

How to use it

For normal body text one can use the Text component without declaring any props:

<Spacings.Inset scale="big">
  <Text>Here goes my body copy</Text>
</Spacings.Inset>

Text styles

There is a single prop called textStyle and it supports all predefined styles of the design system:

This is how you would render a subheadline:

<Spacings.Inset scale="big">
  <Text textStyle="subheadline">Less important headline</Text>
</Spacings.Inset>

Text Priority

For body text it is often important to make some text appear more important or primary. We do so by giving text that is less important a dark gray color.

<Spacings.Inset scale="big">
  <Text textStyle="bodyProlonged">Important text</Text>
  <Text priority="secondary">Less important text</Text>
  <Text priority="error">Text explaining a problem</Text>
  <Text priority="accent">Text to get an attention</Text>
</Spacings.Inset>

On Dark Backgrounds

In places where you want to display text on a dark background you can use the isOnDarkBackground prop to get the text in a color that will have a high enough contrast on the background colors defined in this design system.

<div style={{ backgroundColor: theme.palette.brand.dark }}>
  <Spacings.Inset scale="big">
    <Text isOnDarkBackground>Less important headline</Text>
  </Spacings.Inset>
</div>

Custom Element

Sometimes important content should be displayed with a large font size, but should not be a headline. In those cases you can pass a custom element that will be used instead of rendering e.g. an h-tag.

<Text textStyle="headline1" as="span">
  Super important text that is not a headline
</Text>

How it works

Calculating font sizes

To maintain the freedom to later on easily adjust the font sizes we want to assign a number of a scale to each of our text styles.

For example the caption text, which is the smallest text, would get a scale of 0. The button2 and body texts, which are the second smallest texts, would get a scale of 1.

Next we create a formula that takes the scale value and calculates the css font size that the text style should have.

This is how the formula looks:

const calcPxFontSize = (n) => {
  if (n === 0) {
    return 12;
  }
  return calcPxFontSize(n - 1) + (Math.round((n - 1) / 4) + 1) * 2;
};

The formula is the one that IBMs Carbon Design System is using and is well suited for the web since it procudes round pixel values. It produces values ranging from 12px (0.85rem) to 32px (~2.3rem).

Now, whenever we decide that we are not happy with our text sizes, we simply adjust the formula and don't have to manually change any other values.

Text Crop

There is a very clever text crop component used under the hood to help with aligning texts perfectly. You can read more about it here.

<div
  style={{
    display: "inline-block",
    borderRadius: "4px",
    boxShadow: "inset 0 0 0 10px rgba(199, 222, 184, 0.8)",
    padding: "8px",
    margin: "8px 0",
  }}
>
  <Text textStyle="button1">Cropped text</Text>
</div>