Typography
Consistent use of typography ensures that copy is conveyed in the proper tone, and that special areas of interest are pulled out effectively and consistently. This helps deliver the desired message in the best possible light, which is very important for a brand system.
Yodle’s typographic system consists of two main typefaces: Open Sans and Museo Slab, with Arial as a digital body copy font, and Georgia as a digital fall-back to Museo Sans.
Open Sans
Open Sans is Yodle's primary font family. It is the first thing (in terms of typography) the viewers see. It is friendly, bold, slightly rounded, yet professional. It is used in bolder weights as headline copy to give the viewer an easy way to scan a page for relevant information while keeping with a friendly look and feel.
When to Use Open Sans
Use Open Sans for all headings - primarily h1s and h2s. For print material, use at a regular weight for body copy text. Open Sans is also used for buttons and text that could be classified as a CTA.
Museo Slab
Museo Slab is a supporting font family. Its main purpose is to act as the visual representation of voice and help. It is an important part of Yodle's typography, providing a serif font to contrast the sans-serif Open Sans. Using Museo Slab allows the viewer to easily distinguish areas of a page where there's an offering of assistance, when text is being used as voice (such as a testimonial), or a piece of text that needs to stand out from its surroundings.
When to Use Museo Slab
Museo Slab is used anywhere text can be described as voice or help. A Yodler Yodling, a client testimonial, or a helpful sidebar module all use Museo Slab. Museo Slab most often appears in italic with the exception being subheadings.
Arial and Georgia
Arial
Arial is a web-safe font that displays well at bolder weights and is easy to read.
When to Use Arial
Arial is used for digital body copy and h4s. It also acts as a fall-back for Open Sans in instances where graceful degradation is needed.
Georgia
Georgia is a web-safe font that displays well in italics.
When to Use Georgia
Georgia is used as a fall-back for Museo Slab in instances where graceful degradation is needed.
Basic Construction
H1
Open Sans Extrabold, somewhere around 22pt. to start.
Subheads
Museo Slab 300 or 500, somewhere around 13pt. to start.
H2
Open Sans Bold, usually 16pt.
H3
Museo Slab 700 or 900 Italic, usually 16pt.
H4
Arial Bold, usually 14pt.
Body Copy
Almost always Arial Regular, 12pt., with 18pt. linespacing.