Typography

Typography is critical for communicating the hierarchy of a page.

Always start by creating a clear hierarchy with the help of different sizes. Only work with font weight and body text color if you need to emphasize something.

Headings

Headings are used to show the content hierarchy and are important for improving the reading experience for our users.

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

<Stack>
  <Heading type="display">Display title</Heading>
  <Heading type="displaySubtitle">Display subtitle</Heading>
  <Separator/>
  <Heading type="title1">Title 1</Heading>
  <Heading type="title2">Title 2</Heading>
  <Heading type="title3">Title 3</Heading>
  <Heading type="title4">Title 4</Heading>
  <Heading type="title5">Title 5</Heading>
</Stack>

Colors

To stand out from the page, we use colorHeading as the only heading color.

Font sizes

Type	Size
Display Title	fontSizeHeadingDisplay
Display Subtitle	fontSizeHeadingDisplaySubtitle
Title 1	fontSizeHeadingTitle1
Title 2	fontSizeHeadingTitle2
Title 3	fontSizeHeadingTitle3
Title 4	fontSizeHeadingTitle4
Title 5 (Uppercase)	fontSizeHeadingTitle5

Basic guidelines for headings

# Be respectful of content hierarchy

Try not to skip through heading levels. If you’ve used Title 1, the next level used, if intentionally smaller, should be Title 2.

# Use Display for the main page title

A display heading is great for when you need to show an important title at the top of more structured and content-heavy pages.

# Use the same color for a heading and its connected icon

When a heading requires the support of an icon, we recommend using the same color for both. It makes it easier to scan headings.

# Don’t use Display and Title 1 on one page

It can work in very specific cases, but we usually don’t combine Display and Level 1 headings on one page.

# Don’t place a description below a Display heading

The difference in the sizes of a Display heading and body text is too large. This difference causes a feeling of disconnect between pieces of information.

If you need to show a short description with your title, use Display Subtitle.

Text styles

The most basic component for rendering text blocks.

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

<Stack flex>
  <Stack>
    <Text size="large">Primary Large text</Text>
    <Text>Primary Normal text</Text>
    <Text size="small">Primary small text</Text>
  </Stack>
  <Stack>
    <Text size="large" type="secondary">Secondary Large text</Text>
    <Text type="secondary">Secondary Normal text</Text>
    <Text size="small" type="secondary">Secondary small text</Text>
  </Stack>
</Stack>

Colors for body text

Primary text

colorTextPrimary

#252A31

rgb(37, 42, 49)

Secondary text

colorTextSecondary

#5F738C

rgb(95, 115, 140)

Font sizes

Size	Value
Small	fontSizeTextSmall
Normal	fontSizeTextNormal
Large	fontSizeTextLarge

Basic guidelines for text styles

# Always start with Normal Primary style

When you need something more important, scale it up with font size or color. When you need something less important, scale it down.

# Use Large Primary in modals for the important description

When you need to emphasize the description below a header, Large Primary does the job well.

# Don’t combine more than one size or color in one paragraph

If you need to highlight some text, use the bold weight of the same style.