Type Scale

Our typography scale establishes visual hierarchy and consistency across all digital experiences.

Display XL

4rem 64px 800

Heading 1

3rem 48px 800

Heading 2

2.25rem 36px 700

Heading 3

1.75rem 28px 700

Heading 4

1.5rem 24px 600

Heading 5

1.25rem 20px 600

Heading 6

1.125rem 18px 600

Body Text Large

1.25rem 20px 400

Body Text

1rem 16px 400

Body Text Bold

1rem 16px 700

Body Text Small

0.875rem 14px 400

Caption

0.75rem 12px 400

CSS Variables


    
    :root {

    /* Font Families */

    --font-family-primary: "Open Sans", sans-serif;
    --font-family-display: "Open Sans", sans-serif;

    /* Font Sizes */

    --font-size-display-xl: 4rem;
    --font-size-h1: 3rem;
    --font-size-h2: 2.25rem;
    --font-size-h3: 1.75rem;
    --font-size-h4: 1.5rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1.125rem;
    --font-size-body-lg: 1.25rem;
    --font-size-body: 1rem;
    --font-size-small: 0.875rem;
    --font-size-caption: 0.75rem;

    /* Font Weights */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;   
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Line Heights */

    --line-height-display: 1.1;
    --line-height-heading: 1.2;
    --line-height-body: 1.6;
    --line-height-small: 1.5;

    /* Letter Spacing */

    --letter-spacing-tight: -0.03em;
    --letter-spacing-normal: 0;

    }

}