Marketing Typography
Typography is the visual component of our written communications. It’s what makes reading easier, establishing content hierarchy and making the text easier to digest. Consistent use of type makes for a successful customer experience.
Fonts
Gilroy
Gilroy is a modern sans-serif typeface that we use on our website, blog, and printed collateral.
Note that we use various weights of the Gilroy font family. For headers, we use “Bold” and “Semi-Bold” and for body texts, we use “Medium”.
Typography Scale & Hierarchy
Big and bold, or small and italicized, everyone relies on the hierarchy of text. Hierarchy is the organization of the text. It’s how we establish an order of importance within our communications, allowing the reader to easily read through what they are looking for and navigate the content.
Style
Weight
Size
Line Height
h1
Bold
122
128
h2
Bold
88
96
h3
Bold
72
88
h4
Bold
48
60
h5
Bold
32
40
X-Large Body
Medium
24
40
Large Body
Medium
20
32
Medium
Medium
16
32
Text & Background Pairing
Providing good contrast between background and texts colors will improve readability. Text should be clearly distinguishable from the background. Visit the color page to learn more about colors.
White Background
Neutral
Abyss
Emphasis
Azure
Emphasis
Prince
Emphasis
Turtle
Error
Coral
Off-White Background
Neutral
Abyss
Emphasis
Azure
Emphasis
Prince
Emphasis
Turtle
Error
Coral
Blue Background
Neutral
Abyss
Emphasis
White
Do not use this background for error text
Black Background
Neutral
Abyss
Emphasis
Azure
Emphasis
Prince
Emphasis
Turtle
Error
Coral
Button text colors
Primary Azure
Primary Prince
Primary Turtle
Primary Midnight
Ghost Light
Ghost Dark
Examples
In this example, we break down the usage of sizes, colors, weight, and informational hierarchy of a pricing card.
