Typography

Element Size Line Height Font weight Color iPad @media (max-width: 992px) Mobile @media (max-width: 767px)

Slideshow h1

3rem / 48px 3.75rem / 60px Light #0F2940 ($color-text-primary) Size: 1.375rem / 22px
Line Height: 1.75rem / 28px
Font-weight: regular
Size: 1.375rem / 22px
Line Height: 1.75rem / 28px
Font-weight: semibold

Slideshow h2

2rem / 32px 2.5rem / 40px Light #0F2940 ($color-text-primary) Size: .8125rem / 13px
Line Height: 1.125rem / 18px
Font-weight: semibold
Size: .6875rem / 11px
Line Height: .9375rem / 15px
Font-weight: semibold

h1 header

2.625rem / 42px 3.1875rem / 51px Lighter #0F2940 ($color-text-primary) Size: 2.25rem / 36px
Line Height: 2.625rem / 42px
Font-weight: lighter
Size: 1.625rem / 26px
Line Height: 2.125rem / 34px
Font-weight: semibold

h1 section header

2.625rem / 38px 2.9375 rem / 47px Semibold #0F2940 ($color-text-primary) Size: 2.125rem / 34px
Line Height: 2.625rem / 42px
Font-weight: lighter
Size: 1.75rem / 28px
Line Height: 2.25rem / 36px
Font-weight: semibold

h2 header

1.875rem / 30px 2.4375rem / 39px Semibold #0F2940 ($color-text-primary) Size: 1.5rem / 24px
Line Height: 2rem / 32px
Font-weight: semibold
Size: 1.375rem / 22px
Line Height: 1.75rem / 28px
Font-weight: semibold

h3 header

1.4375rem / 23px 1.8125rem / 29px Semibold #0F2940 ($color-text-primary) Size: 1.375rem / 22px
Line Height: 1.6875rem / 27px
Font-weight: Semibold
Size: 1.25rem / 20px
Line Height: 1.625rem / 26px
Font-weight: Semibold

h4 header

1.25rem / 20px 1.625rem / 26px Semibold #0F2940 ($color-text-primary) Size: 1.1875rem / 19px
Line Height: 1.5625rem / 25px
Font-weight: Semibold
Size: 1.0625rem / 17px
Line Height: 1.5rem / 24px
Font-weight: Semibold
h5 header
1.125rem / 18px 1.4375rem / 23px Bold #0F2940 ($color-text-primary) Size: 1.0625rem / 17px
Line Height: 1.4375rem / 23px
Font-weight: Semibold
Size: .9375rem / 15px
Line Height: 1.375rem / 22px
Font-weight: Semibold
h6 header
1rem / 16px 1.4375rem / 23px Bold #0F2940 ($color-text-primary) Size: 1.0625rem / 15px
Line Height: 1.5rem / 22px
Font-weight: Bold
Size: .875rem / 14px
Line Height: 1.25rem / 20px
Font-weight: Bold
Card title large 1.25rem / 20px 1.625rem / 26px Bold #0F2940 ($color-text-primary) Size: 1.125rem / 18px
Line Height: 1.5rem / 24px
Font-weight: Bold
Size: 1rem / 16px
Line Height: 1.4375rem / 23px
Font-weight: Semibold
Card title small 1.125rem / 28px 1.625rem / 26px Bold #0F2940 ($color-text-primary) Size: 1.0625rem / 17px
Line Height: 1.5rem / 24px
Font-weight: Bold
Size: .9375rem / 15px
Line Height: 1.3125rem / 21px
Font-weight: Bold

p text

1rem / 16px 1.5rem / 24px Regular #222222 ($color-text-secondary) Size: .9375rem / 15px
Line Height: 1.466rem / 22px
Font-weight: Regular
Size: .875rem / 14px
Line Height: 1.25rem / 20px
Font-weight: Regular

lead text

1.125rem / 18px 1.6875rem / 27px Semibold #444444 ($color-text-accent) Size: 1rem / 16px
Line Height: 1.4375rem / 23px
Font-weight: Semibold
Size: .9375rem / 15px
Line Height: 1.4375rem / 23px
Font-weight: Semibold

large quote text

1.25rem / 20px 1.75rem / 28px Regular #444444 ($color-text-accent) Size: 1.125rem / 18px
Line Height: 1.5rem / 24px
Font-weight: Regular
Size: 1rem / 16px
Line Height: 1.4375rem / 23px
Font-weight: Regular

quote text

1.125rem / 18px 1.6875rem / 27px Regular #444444 ($color-text-accent) Size: 1rem / 16px
Line Height: 1.5rem / 24px
Font-weight: Regular
Size: 1.067rem / 15px
Line Height: 1.375rem / 22px
Font-weight: Regular

caption text

.875rem / 14px 1.5rem / 24px Semibold #444444 ($color-text-accent) Size: .8125rem / 13px
Line Height: 1.125rem / 18px
Font-weight: Semibold
Size: .75rem / 12px
Line Height: 1.125rem / 18px
Font-weight: Semibold

caption light text

1rem / 16px 1.5rem / 24px Light #222222 ($color-text-secondary) Size: .8125rem / 13px
Line Height: 1.0625rem / 17px
Font-weight: Light
Size: .75rem / 12px
Line Height: 1rem / 16px
Font-weight: Light

caption large text

1rem / 16px 1.5rem / 24px Semibold #444444 ($color-text-accent) Size: .9375rem / 15px
Line Height: 1.1875rem / 19px
Font-weight: Semibold
Size: .875rem / 14px
Line Height: 1.125rem / 18px
Font-weight: Semibold

caption light large text

1rem / 16px 1.5rem / 24px Light #444444 ($color-text-accent) Size: .9375rem / 15px
Line Height: 1.1875rem / 19px
Font-weight: Light
Size: .875rem / 14px
Line Height: 1.125rem / 18px
Font-weight: Light

p medium text

.875rem / 14px 1.375rem / 22px Regular #222222 ($color-text-secondary) Size: .8125rem / 13px
Line Height: 1.125rem / 18px
Font-weight: Regular
Size: .75rem / 12px
Line Height: 1rem / 16px
Font-weight: Regular

p small text

.75rem / 12px 1rem / 16px Regular #222222 ($color-text-secondary) Size: .75rem / 12px
Line Height: 1rem / 16px
Font-weight: Regular
Size: .75rem / 12px
Line Height: 1rem / 16px
Font-weight: Regular

h1 slideshow

h2 slideshow

h1 header

h2 header

h3 header

h4 header

h5 header
h6 header
Card title large
Card title small

p text

lead text

large quote text

quote text

caption text

caption light text

caption large text

caption light large text

p medium text

p small text


font-weight = 200 ($font-weight-light)
font-weight = 400 ($font-weight-regular)
font-weight = 600 ($font-weight-semibold)
font-weight = 700 ($font-weight-bold)