The relationship between weight, size, line height, reading width, font pairing and justification is complicated to get right – and easy to get wrong. These tiny details really change the UI – and most importantly – our travellers' experience.
Scale
Our product type is from the major third scale and is designed to fit our 8px baseline grid. As the letter size increases, the line height decreases to match the intended use case. Paragraphs require more line height to allow for better legibility, whereas bold headline should never stretch beyond a line or two and can afford to be more tightly set. This achieves harmony within the scale, as well as accurate design that scales easily across multiple devices and platforms.
Line height
For everything to be optically balanced we need to use different line heights to achieve visual balance. For example, Hero uses a tight line height of 100%-110% (depending on Hero), whereas Body Longform uses line-height of 140% for better readability. When used stacked together, there's a perfect harmony between all styles.
Style names
In the new product type scale we have 15 styles (plus two for labels), these are sub-organised into groups with semantic names. At a glance you can tell difference between subheading and body default.
|
Style |
Use case |
|---|---|
|
Hero 1-5 |
Intended for large display copy. The five sizes offer flexibility around usage size with one weight. Typically, a page may contain this once. |
|
Heading 1-5 |
Five heading sizes offer great flexibility for Headlines with one weight. |
|
Paragraphs and body styles |
These range between subheading and caption. These both have the largest line heights for comfortable reading of larger pieces of copy. |
|
Footnote and caption |
Limited use cases for very small pieces of text. |
|
Labels |
For use only inside of labels and buttons. |
Product Type scale
Please note this is being reduced in scale when embedded on page.
Marketing type scale