Text

Text can be a very effective way to communicate information. It’s even more effective when there’s not too much of it, it’s clearly structured, and users are clear what’s important and what isn’t.

Use text sparingly to add necessary information with a clear purpose.

Component status

Figma

Released

Web (React)

Released

iOS (Swift)

n/a

Android (Kotlin)

n/a

Content structure

Text types

Text size

The basic styling options for text are the three possible sizes (Small, Normal, and Large). These sizes should give you a clear hierarchy for all your text.

import Stack from "@kiwicom/orbit-components/lib/Stack";
import Text from "@kiwicom/orbit-components/lib/Text";

<Stack direction="row" align="end">
  <Text size="large">Large text</Text>
  <Text>Normal text</Text>
  <Text size="small">Small text</Text>
</Stack>

Using only the sizes should be enough for the basics. When you have a hierarchy set, you can use color and weight to emphasize certain parts and deemphasize others.

Text color

There are two main colors to work with: primary (Ink / Normal) and secondary (Ink / Light).

import Text from "@kiwicom/orbit-components/lib/Text";
import Stack from "@kiwicom/orbit-components/lib/Stack";

<Stack direction="row">
  <Text>Primary text</Text>
  <Text type="secondary">Secondary text</Text>
</Stack>

Start with primary text as your baseline. Then if you need to deemphasize some text (which is a good way of emphasizing other text), use secondary text to show that it’s not as important.

We also have supplementary colors for when you need to match text to a specific status (as in alerts) or when you’re writing on a dark background.

import Text from "@kiwicom/orbit-components/lib/Text";
import Stack from "@kiwicom/orbit-components/lib/Stack";

<Stack direction="row">
  <Text type="info">Informational text</Text>
  <Text type="success">Success text</Text>
  <Text type="warning">Warning text</Text>
  <Text type="critical">Critical text</Text>
  <div
    style={{
    backgroundColor: "#252A31",
    padding: "8px",
    }}
  >
    <Text type="white">White text</Text>
  </div>
</Stack>

Text weight

When size and color aren’t enough or when you need to emphasize text inside a larger paragraph, you can use weight to add emphasis.

There are only two possible weights for text, normal and bold. In combination with size and color, this should be enough for all your needs.

import Text from "@kiwicom/orbit-components/lib/Text";
import Stack from "@kiwicom/orbit-components/lib/Stack";

<Stack direction="row">
  <Text>Normal text</Text>
  <Text weight="bold">Bold text</Text>
</Stack>

Guidelines   

See also the general guidelines in Typography.           

Base everything off normal primary

Start with normal-sized, primary, unweighted text. Then add importance first with size and then weight. Show less important things first with smaller text and then with secondary color.

Keep all text in a block one color

Inside a paragraph, all the text should be the same color. To emphasize something, use a stronger weight.

  # Use one color

Related components

Heading

Text components are good for adding visual styling. To add structure to your screens, use headings to divide them into clear sections.