Typography

In our apps we have a minimised font stack of Trade Gothic and Trade Gothic Bold. Due to it's slightly compressed width, Trade Gothic functions well for UI purposes – allowing us to keep text sizes larger within complex interface situations.

Font stack

  • Default: Trade Gothic - normal weight - 18px / 24px
  • Trade Gothic Normal
  • Trade Gothic Bold

Sizes

  • t--tiny   Tiny sized text   12px / 18px
  • t--sml   Small sized text   15px / 21px
  • t--reg   Regular sized text   18px / 24px
  • t--lrg   Large sized text   21px / 27px
  • t--xl   Extra-large sized text   24px / 30px
  • t--xxl   Extra-extra-large sized text   30px / 36px
  • t--xxxl   Extra-extra-large sized text   36px / 42px

Additional classes

A standard link with class="link"

Text that is highlighted

Lists

  • A standard list item
  • Another standard list item
  • Another standard list item
  • A standard list item using ul--bull
  • Another standard list item using ul--bull
  • Another standard list item using ul--bull
  • A standard list item using ul--divide
  • Another standard list item using ul--hr-divide
  • Another standard list item using ul--hr-divide
  • Yet another standard list item using ul--hr-divide