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.

Orbit uses Roboto as the only typeface for western texts and Lato for some eastern languages.

1. Headings

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

Colors

For standing out from the page we use Ink Dark as the only heading color.

Font sizes

 Type Size
Title Display 40px
Title 1 28px
Title 2 22px
Title 3 16px

Basic guidelines for headings

Be respectful of content hierarchy
Try not to skip through heading levels. If you’ve used Level 1, the next level used, if intentionally smaller, should be Level 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 a more structured page like Booking or Manage my booking.
Use Level 2 for section headers
Level 2s work great when combined with our icons. It’s also recommended to add 1-2 lines of description below a headline like this.
Use Level 1 for modal windows
Level 1 is great for the title of any modal window, usually combined with a description below it.
Use the same color for heading and its connected icon
Using the same color for a heading and its corresponding icon achieves better structure orientation.

2. Text styles

The most basic component for rendering text blocks.

Colors

$colorTextAttention
#171b1e
$colorTextPrimary
#46515e
$colorTextSecondary
#7f91a8

Font sizes

 Type Size
Small 12px
Normal 14px
Large 16px

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 attention color for highlighting important information in more complicated components
When the size is not enough for showing hierarchy, attention color will help to focus on information we want a user to focus on more and that are most relevant to user’s current task.
Use Large Primary in modal windows for the important description
When you need to emphasize the description below the header, Large Primary style does the job.
Use uppercase very carefully
It's good for very short labels (Inbound, Outbound) or for minimalist tabs (Return, One-Way, Multicity) but it shouldn’t be overused as uppercase is harder to read.