Typography

Our typefaces are used for our website and print collateral, as well as in our product user interface (UI). Typography that is ideal for web may not present well for UI or print, etc. Below are recommendations for font choices by use case.

Typefaces

Aa

Proxima Nova

Used on body copy, as well as our website UI elements such as buttons and links.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
(.,:;?!@#$%&*)

Regular

Semibold

Bold

Aa

DIN 2014

Generally used in headers, as well as some instances of body copy.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
(.,:;?!@#$%&*)

Light

Regular

Demi

Bold

Aa

DIN 2014 Narrow

Used in headers, primarily in all caps. The all caps treatment of this font gives a tech and future/modern feel. We use a generous letter spacing (kerning) to give an airy/breathable feel to the type. It is also used in titles where a more economical font is needed. For example, titles in the Latest section of the website.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
(.,:;?!@#$%&*)

Light

Regular

Demi

Bold

Type Color and Weight

While headers and titles may consist of various color treatments, body copy should always remain neutral. For body copy use full color or 10-50% tints of Navy, avoiding tints above 50% to maintain the text’s legibility.

Body copy should never be solid black to avoid harsh contrast. This does not apply to text paired with a background color other than white. If the use of gray is necessary, these specified tints of Navy below are acceptable as grays.

Acceptable tints for body type color: 0-50%

datsgood Do
GET A COMPLETE CONSUMER VIEW

Know the neighborhoods where people live, what stores they frequent, and the difference between someone interested in running shoes, running for office, or running a small business.

< 50$

Unacceptable tints for body type color: 60-90%

datsbad Don't
GET A COMPLETE CONSUMER VIEW

Know the neighborhoods where people live, what stores they frequent, and the difference between someone interested in running shoes, running for office, or running a small business.

> 60$

Type Treatment for Print

This is an example of type hierarchy and treatment used on a one sheeter, a PDF document for print. Refer to it for a general idea of type treatment rather than definite rules.

type treatment for print graphic
  1. Section Label
    DIN 2014 Narrow, Regular - 11pt, all caps, 75em spacing
  2. Headline
    DIN 2014 Narrow, Regular - 24pt, all caps
  3. Subhead
    Proxima Nova, Regular - 12pt
  4. Body Copy
    Proxima Nova, Regular - 10pt
  5. Bullet Highlight
    Proxima Nova, Bold - 10pt, Bright Blue #3452F4
    (print version of Bright Blue differs from digital version for legibility)
  6. Ordered List
    DIN 2014 Narrow, Bold - 35pt, 75em spacing, Poppy #FF4141

Type Treatment for Web

This is an example of type hierarchy and treatment used throughout the website. Refer to it for a general idea of type treatment rather than definite rules.

type treatment for print graphic
  1. Title or Phrase with Emphasis
    DIN 2014 Narrow, Light - 50pt, all caps, 15px spacing
    DIN 2014 Narrow, Demi - 50pt, all caps, 15px spacing
  2. Headline
    DIN 2014 Narrow, Regular - 40pt, 50pt line height, sentence case, 1px spacing
  3. Bold Stats
    Demi bold numbers paired with light symbols or abbreviations for contrast. The number should always been no less than 11pt smaller than its paired number.
    • Numbers
      DIN 2014 Narrow, Demi - 100pt, 2.75px spacing
    • Symbols and Letters
      DIN 2014 Narrow, Light - 89pt, all caps
    • Stat Descriptor
      DIN 2014, Regular - 15pt, all caps, 2x spacing
  4. “Whisper Shout” Accent Text
    For use behind text as subtle layering effect DIN 2014, Bold - 60pt, all caps, 3px spacing
  5. Section Labels
    DIN 2014 Narrow, Regular - 18pt, all caps, 3px spacing
  6. Header
    DIN 2014 Narrow, Regular - 36pt, 45pt line height, all caps, 1px spacing
  7. Body Copy
    Proxima Nova, Regular - 18pt
  8. CTA Button
    Outlined Button
    Proxima Nova, Medium - 14pt, sentence caps, .54px spacing

    Solid Button
    Proxima Nova, Semibold - 14pt, sentence caps, .54px spacing