Typography

This section shows the hierarchy of typography used in the Spoke & Vessel site pages. It is used to separate text into levels of importance for comprehension and readability for the user.

Typographical Hierarchy

Modified Major Third Scale
Base size: 1rem/16px

H1 Heading

font-family: proxima-nova, sans-serif;
font-size: 2.65rem;
line-height: 50px;
font-weight: 300;
font-style: normal;
color: #575656;

H2 Heading

font-family: circe-slab-a, serif;
font-size: 2.30rem;
line-height: 2.6875rem;
font-weight: 400;
font-style: normal;
color: #575656;

H3 Heading

font-family: proxima-nova, sans-serif;
font-size: 1.75rem;
line-height: 0.625rem;
font-weight: 500;
font-style: normal;
color: #F48020;

H4 Heading

font-family: circe-slab-a, serif;
font-size: 1.4375rem;
line-height: 1.625rem;
font-weight: 400;
font-style: normal;
color: #575656;

H5 Heading

font-family: proxima-nova, sans-serif;
font-size: 1.3125rem;
line-height: 1.5rem;
font-weight: 300;
font-style: normal;
color: #F48020;

Text

font-family: proxima-nova, sans-serif;
font-size: 1rem;
line-height: 3.125rem; font-weight: 300;
font-style: normal;
color: #575656;

Caption

font-family: proxima-nova, sans-serif;
font-size: 0.75rem;
line-height: 0.875rem;
font-weight: 400;
font-style: normal;
color: #575656;

Typographical Hierarchy

Modified Major Third Scale
Base size: 1rem/16px

H1 Heading

font-family: proxima-nova, sans-serif;
font-size: 2.4375rem;
line-height: 2.6875rem;
font-weight: 200;
font-style: normal;
color: #575656;

H2 Heading

font-family: circe-slab-a, serif;
font-size: 1.9375rem;
line-height: 2.125rem;
font-weight: 200;
font-style: normal;
color: #575656;

H3 Heading

font-family: proxima-nova, sans-serif;
font-size: 1.4375rem;
line-height: 1.625rem;
font-weight: 600;
font-style: normal;
color: #F48020;

H4 Heading

font-family: circe-slab-a, serif;
font-size: 1.188rem;
line-height: 1.5rem;
font-weight: 300;
font-style: normal;
color: #575656;

H5 Heading

font-family: proxima-nova, sans-serif;
font-size: 1.188rem;
line-height: 1.375rem;
font-weight: 300;
font-style: normal;
color: #F48020;

Text

font-family: proxima-nova, sans-serif;
font-size: 0.875rem;
line-height: 1.063rem
font-weight: 300;
font-style: normal;
color: #575656;

Caption

font-family: proxima-nova, sans-serif;
font-size: 0.75rem;
line-height: 0.875rem;
font-weight: 300;
font-style: normal;
color: #575656;