Typesetting

Typography values including font families, sizes, and line heights for use in web, iOS and Android projects.

Note: These change per platform.

Font family

NameValue
font-family-base'Skyscanner Relative', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif

Font weight

When designing for web, use Skyscanner Relative.

  • Regular
  • Bold (for emphasised text)

Font size

NameValue
font-size-xs.75rem (12px)
font-size-sm.875rem (14px)
font-size-base1rem (16px)
font-size-lg1.25rem (20px)
font-size-xl1.5rem (24px)
font-size-xxl1.875rem (30px)
font-size-xxxl2.25rem (36px)
font-size-xxxxl2.625rem (42px)
font-size-xxxxxl3.75rem (60px)
font-size-root100% (16px)

Line height

NameValue
line-height-xs1rem (16px)
line-height-sm1.125rem (18px)
line-height-base1.25rem (20px)
line-height-lg1.625rem (26px)
line-height-xl1.9375rem (31px)
line-height-xxl2.4375rem (39px)
line-height-xxxl2.9375rem (47px)
line-height-xxxxl3.4375rem (55px)
line-height-xxxxxl4.875rem (78px)