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.
Don't use Display and Level 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 great. It causes a feeling of disconnection between pieces of information.
💡
If you need to show title and description, use Level 1 or Level 2 for heading instead. It should suit your needs.
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.
Don't combine more than one style or color in one paragraph
If you need highlight some text, use the bold weight of the same style.
Don’t use secondary color for important information
Secondary color is not WCAG compliant so it’s ok to use for additional information but it’s not good to use it for something user should read easily.