UI Foundation
Typography alpha

Type Size

Demo

Usage

Fabric has 5 text sizes...

  • Page Header: 24px
  • Page Subheader/Section Header: 18px
  • Section Sub-Header: 15px
  • Body Text: 14px
  • Sub Text: 12px

Fonts

Demo

Usage

Fabric has 2 fonts...

  • Human Text: Helvetica Neue (everywhere else)
  • Physical Text: Consolas, monospace (when the data is from/to be used in SQL or shown in a Source Table)

Font Weight

  • For text in Helvetica...
    • 500 / Medium: Bold
    • 400 / Normal: Normal
  • For text in Consolas...
    • Bold: Bold
    • Normal: Normal

Changelog

  • December 9, 2016 - Promoted to Alpha, added font weight guidelines, updated font size guidelines
    • Section Sub-Headers are now 15px (instead of 16px)
  • August 9, 2016 - Updated type size for better visual information hierarchy
    • Section Headers/Page Subheaders are now 18px (instead of 16px)
    • Section Sub-Headers are now 16px (instead of 14px)
    • Page headers, body, and subtext remain the same