Visual

Typography

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

Typefaces

Sprout Social’s primary font family is Proxima Nova. Our native mobile apps utilize the system font families: San Francisco for iOS and Roboto for Android.

When Proxima Nova is unavailable, we default to the system font families. Defaulting to these fonts also helps with emoji rendering. The Proxima tokens already include these system font fallbacks; do not use the system font stack on its own unless you are using Seeds in a situation where loading Proxima is impossible or unwise.

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 Size 500 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.

Scope
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

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 - Size 900
  • H2 - Size 800
  • H3 - Size 700
  • H4 - Size 600
  • H5 - Size 500

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 - Size 600
  • Medium lead - Size 500

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 - Size 400
  • Small paragraph - Size 300
  • Small paragraph - Size 200

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 - Size 700
  • Small block quotation - Size 500
  • Attribution - Size 200

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 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 - Neutral 1000
  • Paragraphs - Neutral 1000

Dark backgrounds

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

  • Headings - Neutral 0
  • Paragraphs - Neutral 200

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