Skip to main content

Typesetting

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

Table of Contents

Android

Font weight

When designing for Android, use Skyscanner Relative Android.

  • Book
  • Emphasized (for emphasised text)
  • Heavy (for font-size-xxl only)

Font size

NameValue
font-size-caps10sp
font-size-xs12sp
font-size-sm14sp
font-size-base16sp
font-size-lg20sp
font-size-xl24sp
font-size-xxl30sp
font-size-xxxl36sp

iOS

Font weight

When designing for iOS, use Skyscanner Relative iOS.

  • Book
  • Emphasized (for emphasised text)
  • Heavy (for font-size-xxl only)

Font size

NameValue
font-size-caps10pt
font-size-xs12pt
font-size-sm14pt
font-size-base16pt
font-size-lg20pt
font-size-xl24pt
font-size-xxl30pt
font-size-xxxl36pt

Web

Font family

NameValue
font-family-base'Skyscanner Relative', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 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)