Typography

Typography is critical for communicating the hierarchy of a page.

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

Headings

Headings are used for showing 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

For standing 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 heading and its connected icon

When heading requires the support of an icon, we recommend using the same color for both. It makes headings scannable more easily.

Don’t use Display and Title 1 on one page

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

Don’t place the description below Display heading

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

If you need to show title and short description, use Display Subtitle type.

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 the header, Large Primary style 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.