Typography

The PIE typography is set so that our layouts and content is easy to read and presented with a clear hierarchy.

Alias typography tokens

Alias type tokens have a combination of the type global tokens and are divided in groups of typographic hierarchy.

Headings

Example Description Token name
  • String
    Heading XXL Used for component and layout headings.
    $font-heading-xxl
  • String
    Heading XL Used for component and layout headings.
    $font-heading-xl
  • String
    Heading L Used for component and layout headings.
    $font-heading-l
  • String
    Heading M Used for component and layout headings.
    $font-heading-m
  • String
    Heading S Used for component and layout headings.
    $font-heading-s

Subheadings

Example Description Token name
  • String
    Subheading L Used for component and layout subheadings.
    $font-subheading-l
  • String
    Subheading S Used for component and layout subheadings.
    $font-subheading-s

Body

Example Description Token name
  • String
    Body Used for body copy. Generally used for comfortable long-form reading in layouts.
    $font-body-l
  • String
    Body underline Used as a visual cue to indicate something is a link.
    $font-body-l-link
  • String
    Body small Used for body copy. Generally used for components.
    $font-body-s
  • String
    Body small underline Used as a visual cue to indicate something is a link.
    $font-body-s-link

Body (Strong)

Example Description Token name
  • String
    Body bold Used for strong emphasis in body copy.
    $font-body-strong-l
  • String
    Body bold underline Used for strong emphasis in body copy.
    $font-body-strong-l-link
  • String
    Body small bold Used for strong emphasis in body copy.
    $font-body-strong-s
  • String
    Body small bold underline Used for strong emphasis in body copy.
    $font-body-strong-s-link

Caption

Example Description Token name
  • String
    Caption Used for captions, labels, disclaimers or helper text. Use sparingly.
    $font-caption
  • String
    Caption Underline Used as a visual cue to indicate something is a link.
    $font-caption-link

Caption (Strong)

Example Description Token name
  • String
    Caption bold Used for captions, labels, disclaimers or helper text. Use sparingly.
    $font-caption-strong

Interactive

Example Description Token name
  • String
    Interactive L Used for labels in large sized button components + numeric counter.
    $font-interactive-l
  • String
    Interactive M Used for labels in medium sized button components.
    $font-interactive-m
  • String
    Interactive S Used for labels in small sized button components.
    $font-interactive-s
  • String
    Interactive XS Used for labels in extra small sized button components.
    $font-interactive-xs