Visual
Brand typography
Typography guidelines ensure that we maximize legibility and maintain visual hierarchy throughout all of our content.
Typeface
Primary type: Roboto Serif Regular
Roboto Serif's letterforms were designed to feel comfortable next to a sans serif font without causing strain or reader fatigue to the viewer who reads it. A cross between a serif and a more modern slab type-face, its minimal design is intentional and decisive with curves and terminals that pay homage to traditional serifs without coming across as bookish.
Secondary type: Proxima Nova Regular + Bold
Our secondary body copy, Proxima Nova Regular, remains the same as our current body copy. Copy that requires extra emphasis such as labels, links and buttons will be displayed using Proxima Nova Bold.
Type hierarchy
One of the most important techniques for effectively communicating content is the use of typographic hierarchy. Using variations in size, weight, color and position of type, typographic hierarchy ensures that important information stands out, while less important details fade into the background. This not only makes the content more legible and easy to understand, but also helps create a consistent and recognizable brand identity.
Type scale and weights
Print & Digital
Desktop Web
Tablet & Mobile
Type setting
When type setting content, it's imperative to proofread and spellcheck everything. Additionally, follow the below dos and don'ts to ensure all content is set consistently. For more information, please read our full writing guidelines.
Sentence case for headlines
To feel more human and personal, all headlines should be written in sentence case. Seeds defines a headline as “the line of copy at the top of a piece of communication, used to draw the reader in.” Never use a period at the end of a title or headline. The only end punctuation used should be a question mark following a question, or an ellipsis if breaking up a sentence.
Title case for titles
At Sprout, we consider a title to be the name of a project, usually displayed on the cover, front page, first screen, etc. Title should be displayed in title case.
Title case for labels
Often set in smaller sizes than surrounding content, labels set in bold title case provide a quick scannable overview for readers. Title case treatments also help maintain visual consistency for specific types of components on the web (i.e. feature grids).
Sentence case for buttons and links
Since links can be present within body copy, the universal standard for all links are to be set in sentence case for consistency. Buttons are often paired with a link and should follow the same type setting. Sentence case buttons are an international standard and Sprout maintaining this consistency creates a familiar experience for our global audience.
Numbers and stats
When multiple data points or numbers are included in a single layout and treated as secondary or supporting content, typeset them in Proxima Nova for stronger scannability.
Larger, stand-alone stats can be typeset in Roboto Serif for additional visual emphasis.
Numbers and labels used in data visualizations should always be typeset in Proxima.
Type-setting rules at a glance
Email type
Primary & Secondary type
To ensure email content appears the same to all subscribers across all email providers, Georgia should be used as a fall back font in place of Roboto Serif with Helvetica in place of Proxima Nova. Sprout's existing brand typography guidelines should be maintained for maximum legibility and to maintain visual hierarchy.
Product type
Our products utilize the system font families: San Francisco and Roboto.
