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.

Roboto serif regular font specification

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.

Roboto regular and Proxima Nova as headline and body copy respectively
Small type specs showing Roboto serif regular, Proxima Nova Regular, 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

headlines hierarchy
Print and digital hierarchies

Desktop Web

Desktop web type hierarchies

Tablet & Mobile

Tablet and mobile type hierarchies

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.

Sentence case for headline text

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 titles

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

Title case for labels

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.

Sentence case for buttons and links

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.

Numbers and stats type treatment

Type-setting rules at a glance

do
Use sentence case on titles, headings, subheadings
dont
Use periods at the end of a title or heading
do
Use Space 400 after paragraphs
dont
Use uppercase for lines longer than 3 words
do
Use letter-spacing with uppercase text
dont
Use letter spacing on title case or sentence case text
do
Use between 50-80 characters per line when possible
dont
Use hyphens for line breaks
do
Use curly quotes and curly apostrophes in text
dont
Use inch marks or typewriter apostrophes in text
do
Use documented font weight, color or size variations to create hierarchy
dont
Use font weights or sizes not documented in the guidelines
do
Use left-aligned paragraph style and/or centered depending on existing visual/spacial factors
dont
Use fully-justified and/or right-aligned paragraph styles
do
Use clean, balanced rags when typesetting a block of text in left alignment
dont
Allow for orphans or widows in column and/or paragraph formatting

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.

Email typography

Product type

Our products utilize the system font families: San Francisco and Roboto.

Product typography
Pro tip
This page contains guidelines for using typography within brand and marketing experiences. If you're working on one of our products, please refer to our product typography guidelines.