design
Typography
Good typography can make a design tight and neat—and we like that. Follow our typographic standards and practices, and we’ll like you, too.
Type stack
We use two sans serifs for Zendesk brand-related design materials: Sharp Sans and Proxima Nova. Sharp Sans is used for display-type treatments where our message needs to be loud, stylish, and confident. Proxima Nova is a tried-and-true typeface, designed for legibility and ease of use.
type stack
sharp sans display no. 1
This typeface is for headlines.
Proxima Nova
This typeface is for reading supporting copy, or longer form.
Type scale
The Zendesk typographic scale for our website has different weights and styles to lay out responsive compositions for both desktop and mobile, as well as supporting our Zendesk brand narrative, voice, and tone.
8px system
The scale is based on an 8px system, where the type is largely divisible by 8. This mathematical approach to typography allows for clean relationships between headers, sub-heads, and body copy. When it comes to smaller sizes, the system is a little looser to allow for precise type specifications.
FONT SIZE / LINESPACING – CLASSIFICATION
56/62px - Header One
40/46px - Header One
Zendesk builds software for better customer relationships
34/44px - Header TWO
48/52px - Header Two
Zendesk builds software for better customer relationships
22/30px - Header THREE
32/38px - Header Three
Zendesk builds software for better customer relationships
20/24px - Header FOUR
24/32px - Header Four
Zendesk builds software for better customer relationships
18/22px - SUBHEAD ONE
20/24px - Subhead One
Zendesk builds software for better customer relationships
16/20px - SUBHEAD TWO
16/20px - Subhead Two
Zendesk builds software for better customer relationships
18/27px - LONGFORM
22/33px - Longform
Zendesk builds software for better customer relationships
16/24px - PARAGRAPH
16/24px - Paragraph
Zendesk builds software for better customer relationships
13/16px - CAPTION
13/16px - Caption
Zendesk builds software for better customer relationships
12/16px - SUPERTITLE
12/16px - SUPERTITLE
Zendesk builds software for better customer relationships
Color in typography
The interface colors are the main sets of colors for a general website layout. Colors that pertain to navigations, section modules, general typography, and footers are in the realm of “interface colors.”
Headers, subheads, backgrounds
Body copy
Longform copy, headers, dividers
Longform copy, headers, dividers
Layer on subtle gray, hover state for navigation hovers
Links, hover states
Example pairings
Here are some examples of typographic pairs that we commonly use on our marketing website.
Headline + subhead (h2 / S1)
Watch it in real time or on your own time
Choose between a live or on-demand version of the Zendesk Support demo.
Headline + body copy (h3 / Paragraph)
Watch it in real time or on your own time
Choose between a live or on-demand version of the Zendesk Support demo.
Headline + longform copy (H3 / Longform)
There’s an art to eating well and wisely, and membership service NatureBox saw an opportunity to make it easy.
Based in the San Francisco Bay Area, and with distribution centers in California’s Central Valley and in Indiana, NatureBox differentiated itself in 2012 by developing its own line of nutritionist-approved snacks that don’t skimp on flavor, whether that’s oatmeal, veggie chips, or decadent, antioxidant-rich cocoa almonds.
Line width
Be conscious of the space between the beginning and end of a text box. It can be the difference between content that's easy to read and content that makes you cross-eyed.
Proper character lengths of a text box depends on the purpose and placement of the content (marketing e-mail vs. blog post) and the size of the font. Use design sensibility wherever possible, but these are optimal character limit baselines for headline and body copy for a long form post.
These text boxes are waaaaay tooooooo looooong.
Social
©Zendesk 2019