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”.

Full Version on Font Spring →

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.

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.