Typography

PIE typography works with our layouts to present content in a clear hierarchy and in a way that's easy to read.

Global typography tokens

These are the original values in our design language, represented by context-agnostic names. They define the values that can be assigned to our alias tokens, which are the ones used in Graphical User Interfaces (GUI) while designing and developing our products.

Font family

Example Description Token name
  • String
    JET Sans Our primary font family
    $font-family-primary
  • String
    Arial Used only as a fallback font
    $font-family-secondary
  • String
    PT Mono Used only for snippets of code
    $font-family-code

Font weight

Example Description Token name
  • String
    Extra bold
    $font-weight-extrabold
  • String
    Bold
    $font-weight-bold
  • String
    Regular
    $font-weight-regular

Font size

Example Description Token name
  • String
    Font size 12 Text size: 12px
    Line height: 16px
    $font-size-12
  • String
    Font size 14 Text size: 14px
    Line height: 20px
    $font-size-14
  • String
    Font size 16 Text size: 16px
    Line height: 24px
    $font-size-16
  • String
    Font size 19 Text size: 19px
    Line height: 28px
    $font-size-19
  • String
    Font size 20 Text size: 20px
    Line height: 28px
    $font-size-20
  • String
    Font size 24 Text size: 24px
    Line height: 32px
    $font-size-24
  • String
    Font size 28 Text size: 28px
    Line height: 36px
    $font-size-28
  • String
    Font size 32 Text size: 32px
    Line height: 40px
    $font-size-32
  • String
    Font size 48 Text size: 48px
    Line height: 56px
    $font-size-48

Font style

Example Description Token name
  • String
    Underline Text decoration: underline
    $font-style-underline

Paragraph spacing

Example Description Token name

  • Paragraph

    Paragraph

    Paragraph spacing 1 Space between paragraphs: 16px
    $font-paragraph-spacing-01

  • Paragraph

    Paragraph

    Paragraph spacing 2 Space between paragraphs: 14px
    $font-paragraph-spacing-02

  • Paragraph

    Paragraph

    Paragraph spacing 3 Space between paragraphs: 12px
    $font-paragraph-spacing-03

Letter spacing

Example Description Token name
  • String
    Letter spacing 0 Default letter spacing
    $font-letter-spacing-00