Branding Guide and Design System

05 Typography

Typography

Copy and typography work in tandem to convey Essendant’s brand identity. The visual tone we’ve developed for messaging is clean, professional and expresses our strength as distribution experts. Maintaining our standard of usage, hierarchy, stylization and color assures brand recognition and builds trust.

Typeface for General and Print Use

The primary Essendant brand typeface is Gotham.
Do use the Gotham typeface in these formats.

The Gotham typeface alphabet 
shown here in the Book format.

Don’t use the Gotham typeface in its oblique/italicized format.

Gotham Bold
Gotham Medium

Gotham Book
Gotham Light

Typeface for Website and Email Use

For digital communications such as essendant.com and Essendant emails, we use the Montserrat typeface.
Do use the Montserrat typeface in these formats.

Montserrat Extra Bold
Montserrat Bold
Montserrat Medium
Montserrat Book
Montserrat Light

The Montserrat typeface alphabet 
shown here in the Regular format.

Aa  Bb  Cc  Dd  Ee  Ff  Gg 
Hh  Ii  Jj  Kk  Ll  Mm  Nn 
Oo  Pp  Qq  Rr  Ss  Tt  Uu 
Vv  Ww  Xx  Yy  Zz
1  2  3  4  5  6  7  8  9  0
!  ?  @  #  %  &  (  )  +  /  [  }

Don’t use the Montserrat typeface in its oblique/italicized format.

Montserrat Extra Bold
Montserrat Bold
Montserrat Medium

Montserrat Book
Montserrat Light

Typeface for Limiting Environments

When we are unable to provide content using Gotham or Montserrat, such as in a Word document, we use the Arial typeface.
Do use these formats of the Arial typeface.

Arial Bold
Arial Regular

Don’t use the Arial typeface in its oblique/italicized format.

Arial Bold
Arial Regular

Color Guide

To maintain legibility and our branding, follow these examples.

Please refer to the color section for more in-depth information on color usage.

Do follow these guidelines for proper color usage.
Text on White Backgrounds
 
We Use Essendant
Dark Blue for Headlines

We Use Essendant Light Blue for Subheads

And we use Essendant dark gray (PMS: 440C) for paragraph and body copy. We also use Essendant Light Blue in bold to highlight content within paragraphs and body copy.

Text on Light Blue Backgrounds
 
We Use White for Headlines

We Use Essendant Dark Blue for Subheads

And we use white for paragraph and body copy. We also use Essendant Dark Blue in bold to highlight content within paragraphs and body copy.

Text on Dark Blue Backgrounds
 
We Use White for Headlines

We Use Essendant Light Blue for Subheads

And we use white for paragraph and body copy. We also use Essendant Light Blue in bold to highlight content within paragraphs and body copy.

Text on Dark Backgrounds
 
We Use White for Headlines

We Use Essendant Light Blue for Subheads

And we use white for paragraph and body copy. We also use Essendant Light Blue in bold to highlight content within paragraphs and body copy.

Don’t use color combinations that are not part of our standard practices.

Type Hierarchy

Extremely important for communicating information clearly, type hierarchy improves user experience and ensures accessibility.

A good rule of thumb is to base your headline and subhead sizes on your paragraph type size. Multiply the paragraph type size by 1.5 to determine subhead size, by 3.5 for headline size.
Do follow the 1 : 1.5 : 3.5 ratio outlined in the chart below and represented in text setup in box.
SizeTable_Mobile

Properly Sized Headline

Properly Sized Subhead Text 

The chosen paragraph text size will determine your sizes for the subhead and headline text. The chosen paragraph text size will determine your sizes for the subhead and headline text. The chosen paragraph text size will determine your sizes for the subhead and headline text. The chosen paragraph text size will determine your sizes for the subhead and headline text. The chosen paragraph text size will determine your sizes for the subhead and headline text.

Leading

This technique creates the right spacing between the baselines of each line of text which, along with tracking and kerning, ensures legibility.

Here is a good standard to follow: Multiply headline type size by 110% and round up to determine leading; for subheads and paragraph copy, multiply their type size by 150% and round up.
Do use healthy leading in your typography.

Here our type size is 35pt, thus our leading is 39pt

This is a Headline with Proper Leading

Here our type size is 15pt, thus our leading is 23pt

This is a Subhead with Proper Leading

Here our type size is 10pt, thus our leading is 15pt

This is a paragraph copy with proper leading. This is a paragraph copy with proper leading. This is a paragraph copy with proper leading. This is a paragraph copy with proper leading. This is a paragraph copy with proper leading. This is a paragraph copy with proper leading.

Don’t use leading that is too tight or too loose.

Tracking

Use this design tool to set up the proper spacing between characters across an entire piece of text. Here’s the breakdown to follow: We treat bold headlines with -25pt tracking, bold subheads with -10pt tracking, and paragraph text with 0pt tracking.
Do use healthy tracking in your typography.

For headlines use -25pt tracking

This is a Headline with Proper Tracking

For subheads use -10pt tracking

This is a Subhead with Proper Tracking

For paragraph copy use 0pt tracking

This is a paragraph copy with proper tracking. This is a paragraph copy with proper tracking. This is a paragraph copy with proper tracking. This is a paragraph copy with proper tracking. This is a paragraph copy with proper tracking. This is a paragraph copy with proper tracking.

Don’t use tracking that is too tight or too loose.

Kerning

For a visually pleasing result, keep kerning, the space applied between individual letters, even. Our logo is a perfect example of this approach. None of the letters have too much or too little space between them.
Do use healthy kerning in your typography.
Don’t use uneven kerning across words (highlighted in light blue below).