Product 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
Ubuntu
Ubuntu is a versatile display font that we use for headlines on our website, blog, and printed collateral.
Note that we only use the ‘Medium’ weight of the Ubuntu font family. If you feel the need to use a thinner or heavier weight, please contact the design team before doing so.
Proxima Nova
Proxima Nova is a light, easy-to-read font that we use for written content on our website, blog, and printed collateral.
Note that we only use the ‘Regular’ weight of the Proxima Nova font family. If you feel the need to use a thinner or heavier weight, please contact the design team before doing so.
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
40
48
h2
Medium
32
40
h3
Medium
24
32
h4
Regular
20
32
Larger Body
Regular
16
25
Regular Body
Regular
15
25
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
Examples
In this example, we break down the usage of sizes, colors, weight, and informational hierarchy of one Dreamhost Web Panel section.
