Typography

Our typography system will render at the following sizes for desktop, tablet, and mobile.

Headings

The following heading styles are supported.

    • 60px / 3.75rem
    • 48px / 3rem
    • 35px / 2.5rem

    H1 Main Heading

    • 48px / 3rem
    • 32px / 2rem
    • 28px / 2rem

    H2 Secondary Heading

    • 32px / 2rem
    • 32px / 2rem
    • 28px / 2rem

    H3 Tertiary Heading

    • 32px / 2rem
    • 20px / 1.25rem
    • 17.5px / 1.25rem

    H4 Heading

    • 20px / 1.25rem
    • 20px / 1.25rem
    • 14px / 1rem
    H5 Heading

Body

The following body styles are supported.

    • 16px / 1rem
    • 16px / 1rem
    • 14px / 1rem

    Body

    • 12px / 0.75rem
    • 12px / 0.75rem
    • 10.5px / 0.75rem

    Body (smaller)

    • 18px / 1.125rem
    • 18px / 1.125rem
    • 16px / 1.143rem

    Body (larger)

Modifiers

The following modifiers can be applied to any of the above headings or body text.

  • Normal

  • Bolded

  • Airy

  • Uppercase

  • Lowercase

  • Capitalize