Typography
Currently we use a single font system and rely on various weights, sizes, and color to create visual hierarchy. Poppins, an open source Google Font, comes in many weights and sizes. We don't utilize them all but we are consistent in our usage.
Body text
When using body copy across the site, it's important to consider its placement, header pairing, and importance in order to utilize the correct size.
Body - Large
Used when pared with Headlines XXL and larger. Thise body copy size will hold up in headlines but should never be used for more than two sentences.
Size: 20px
Line-height: 28px
Letter Spacing: 0px
Body - Medium (default)
This is your every day body copy used for most instances and long form copy. Do not pare this copy size with Headline XXL or larger as it will be visually overpowered.
Size: 16px
Line-height: 24px
Letter Spacing: 0px
Body - Small (caption)
Our smallest body copy size is only used in circumstances where space may be incredibly limited or something needs to be annotated, such as an image caption.
Size: 14px
Line-height: 20px
Letter Spacing: 0px
Headlines
Typographic hierarchy is critical to a well designed layout. In order to achieve optimal flexibility and range, we have created a t-shirt sizing chart for our headlines.
Headline XXXXL
Utilized to display only the most important messages on key pages or bold graphics.
Size: 120px
Line-height: 136px
Letter Spacing: .75px
Headline XXXL
Utilized to display short headlines on key or top level web pages. It can also be used in layout for short, significant headlines.
Size: 96px
Line-height: 100px
Letter Spacing: .75px
Headline XXL
Utilized to display short headlines on key or top level web pages. It can also be used in layout for short, significant headlines and a primary h1 style..
Size: 72px
Line-height: 74px
Letter Spacing: .75px
Headline XL
Used in layout for short, significant headlines.
Size: 48px
Line-height: 56px
Letter Spacing: .75px
Headline L
Used in layout for section titles and short headlines. A primary headline style for h2 tags.
Size: 40px
Line-height: 48px
Letter Spacing: .75px
Headline M
Used in layout for section titles and headlines. A secondary headline style for h2 tags.
Size: 32px
Line-height: 40px
Letter Spacing: .5px
Headline s
Used in layout for headlines. A primary headline style for h3 tags.
Size: 24px
Line-height: 32px
Letter Spacing: .375px
Headline XS
Primarily used in mobile styling and smaller, less prominent headlines.
Size: 20px
Line-height: 24px
Letter Spacing: .25px
Headline XXS
Primarily used in mobile styling and smaller, less prominant headlines. Also of note, this headline should always be paired with Body Small.
Size: 18px
Line-height: 20px
Letter Spacing: .25px
In practice
When using this typographic guide in templates or print collateral, refer to the above sizing guides. When creating code based designs within our website, we have created a simple "T-Shirt" size class naming structure to follow. This allows for maximum flexibility in the design and accessibility standers.
eg. <h2 class="headline-xxl"> or <p class="body-l">