Typography

Two typefaces are used throughout the product—Lato and Marydale. Lato, a sans serif font, is the primary typeface for web and mobile. Marydale is a hand-written typeface that should be used sparingly. It is primarily used on the Visitor Site, which allows for more brand expression.

 
 
Lato
Lato Regular

Lato Regular

Lato Bold

Lato Bold

Lato Light

Lato Light

Lato Light Italic

Lato Light Italic

 
Lato Usage
Lato-Type-Guideline.png
 

Headlines

Color: Lato is typically used in dark gray headlines or subheads. For callouts and links, the main color palette can be employed. 

Capitalization: Capitalize in “Sentence Case." Never use all caps. 

Positioning: When using Marydale in the eyebrow and Lato in the headline, both should be center aligned. On mobile, Lato can be aligned left if it’s not in the masthead of a section.

Hyphenation: Never hyphenate

Leading & Tracking: Optimal tracking should be greater than -10 and less than +10. Leading should be about +5 or 6 points.

Drop Shadow: A subtle black drop shadow can be applied to text set over a photo.

 

Body Copy

Color: Use gray, or if used over colored backgrounds, reverse out to white. 

Alignment: For text longer than two sentences, align left. For short phrases, centered text may also be used. Do not justify.

Hyphenation: Never hyphenate

Leading & Tracking: Optimal tracking should be 0. Leading should be about +5 or 6 points.

Drop Shadow: Never use drop shadows on body copy. 

 
Marydale
Marydale.png
Marydale Usage
 

Desktop Only

Use Marydale in headlines or eyebrows. Only use Marydale in the
headline if there’s no eyebrow.

Color: Always use a bright color—preferebly from the Primary color palette. Reverse out to white on colored backgrounds or textures. 

Capitalization: Only capitalize if it’s a proper noun or starting a sentence. 

Hyphenation: Do not hyphenate Marydale. 

Size: When used in the eyebrow, Marydale should be between 20 - 40 pts smaller than the headline.