Product typography

Everyone has a type. Skiing across an untouched piste? Yep. Being horizontal on a deserted beach? Phwoar. But we also have a thing for typography.

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.

Skyscanner Relative Supernova


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.

Beta Typescale example Supernova

Style names

In the new product type scale we have 18 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.


Use case


Brand World flair, very large display only typography, reserved for a few short words only.

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.

Editorial 1-3

Larken is reserved for use on Audience pages. See more information in Larken guidance.

Footnote and caption

Limited use cases for very small pieces of text.


For use only inside of labels and buttons.

Product Type scale

Please note this is being reduced in scale when embedded on page.

Product Type Scale Supernova

Marketing type scale