Brand typography

Typography guidelines ensure that we maximize legibility and maintain visual hierarchy throughout all of our content.

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.


Sprout Social’s primary font family is Proxima Nova. Our products utilize the system font families: San Francisco and Roboto. Emails default to Helvetica. When Proxima Nova is unavailable, we default to the system font families.

Type scale and weights

Line heights are calculated to ensure at least three lines align to an 8px grid. Use the associated line height values only.

For mobile, use a minimum of for body copy. Large headings on the desktop web will need to be reduced in scale on mobile so they do not take up the entire screen.

Font Size
Line Height (px)
Line Height (proportional)
SassCopy Both
@include Typography-size--600;
JavascriptCopy Both
CSSCopy Both
<Text fontSize={600} />

Type styles (Desktop, Web)

When working with different type styles it’s important to adhere to the type scale at all times. Never introduce a new type size. Below are some standards for the web we’ve defined to help you get started using the correct sizes for your content.


Headings are used to separate sections of content. Headings should always be set in a font weight of bold or extrabold.

  • H1 -
  • H2 -
  • H3 -
  • H4 -
  • H5 -

Lead paragraphs

Lead paragraphs are used to draw the reader in, they should only be used at the beginning of content. Lead paragraphs should always be set in regular font weight.

  • Large lead -
  • Medium lead -


Use paragraphs to distinguish sections of a piece of writing. Paragraphs usually deal with a single theme and are indicated by a new line, indentation or numbering. Paragraphs should always be set in regular font weight.

  • Paragraph -
  • Small paragraph -
  • Small paragraph -

Block quotations

Use block quotations to visually distinguish quotations on a page. Block quotations are typically set apart from the main text and often utilize indentation, a different typeface or a different font size. Block quotations should always be set in a font weight of bold or extrabold.

  • Block quotation -
  • Small block quotation -
  • Attribution -

Typographic 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 establishes an order of importance that visually guides the reader through content to easily find what they are looking for.

Type hierarchy

Type color

To maintain accessible contrast, use our standard type color values when working with text on various background colors.

Light backgrounds

When placing text on a light background, all type should use the following color values:

  • Headings -
  • Paragraphs -

Dark backgrounds

When placing text on a dark background all type should use the following color values:

  • Headings -
  • Paragraphs -

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.

Learn more about this in the writing section.

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.

Learn more about this in the writing section.

Sentence case

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

Using Typography in code

Design token documentation