Typography

Typeface

Below uses Inter a free and open source font family. It’s a typeface specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens.

Inter can be accessed and downloaded here.

Usage

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed sem aliquam, iaculis neque in, aliquet lorem.

Headings

Token Role Value
$heading-01 This is for page heading.
  • Type: Inter UI
  • Size: 40px
  • Weight: 400
  • Letter spacing: -0.022em
  • Line height: 56px
$heading-02 This is for layout headings.
  • Type: Inter UI
  • Size: 30px
  • Weight: 400
  • Letter spacing: 0.001em
  • Line height: 42px
$heading-03 This is for layout headings.
  • Type: Inter UI
  • Size: 24px
  • Weight: 400
  • Letter spacing: -0.019em
  • Line height: 34px
$heading-04 This is for component and layoutheadings.
  • Type: Inter UI
  • Size: 20px
  • Weight: 400
  • Letter spacing: -0.017em
  • Line height: 28px
$heading-05 This is for component and layoutheadings.
  • Type: Inter UI
  • Size: 16px
  • Weight: 600
  • Letter spacing: -0.011em
  • Line height: 22px
$heading-06 This is for components.
  • Type: Inter UI
  • Size: 14px
  • Weight: 600
  • Letter spacing: -0.006em
  • Line height: 20px

Body

Token Role Value
$body-01 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed sem aliquam, iaculis neque in, aliquet lorem. Mauris tristique iaculis dui, at tempus dolor vulputate id.
  • Type: Inter
  • Size: 16px
  • Weight: 400
  • Letter spacing: -0.011em
  • Line height: 22px
$body-02 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed sem aliquam, iaculis neque in, aliquet lorem. Mauris tristique iaculis dui, at tempus dolor vulputate id.
  • Type: Inter
  • Size: 14px
  • Weight: 400
  • Letter spacing: -0.006em
  • Line height: 20px
$body-02-strong Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed sem aliquam, iaculis neque in, aliquet lorem. Mauris tristique iaculis dui, at tempus dolor vulputate id.
  • Type: Inter
  • Size: 14px
  • Weight: 500
  • Letter spacing: -0.006em
  • Line height: 20px