Visual

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.

Typefaces

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.

Presets
Font Size
Weight
Theme
Token
600
Line Height (px)
32px
Line Height (proportional)
1.33
SassCopy Both
@include Typography-size--600;
$Typography-weight--normal
JavascriptCopy Both
TYPOGRAPHY_SIZE_600
TYPOGRAPHY_WEIGHT_NORMAL
CSSCopy Both
--typography-size--600
--typography-weight--normal
Component
<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

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 -

Paragraphs

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 the full writing guidelines.

Sentence case

To feel more human and personal, all titles and headlines should be written in sentence case. 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

The only times text should be shown in title case is when displaying a CTA inside a button, referencing a proper noun or when the header is used as a label (e.g. the section headers on this page).

Sentence case

Do
Use sentence case on titles, headings, subheadings
Don't
Use periods at the end of a title or heading
Do
Use Space 400 - 16px after paragraphs
Don't
Use uppercase for lines longer than 3 words
Do
Use letter-spacing with uppercase text
Don't
Use letter spacing on title case or sentence case text
Do
Use between 50-80 characters per line when possible
Don't
Use hyphens for line breaks
Do
Use curly quotes and curly apostrophes in text
Don't
Use inch marks or typewriter apostrophes in text
Do
Use documented font weight, color or size variations to create hierarchy
Don't
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
Don't
Use fully-justified and/or right-aligned paragraph styles
Do
Use Proxima Regular, Bold and Extrabold
Don't
Use any Proxima Nova extended families
Do
Use clean, balanced rags when typesetting a block of text in left alignment
Don't
Allow for orphans or widows in column and/or paragraph formating

Using Typography in code

Design token documentation