Typography rules

Purpose, mission, vision
Positioning
Tagline
General brand rules
Tone of voice
Typography
Our typography is bold and confident with an attitude

Font sizes

Use the following font sizes in web interfaces:

FontHeadingMobileLine height
Desktop + tabletLine heightXL DesktopLine height
TypefaceSize (px)(px)(em)Size (px)(px)(em)Size (px)(px)(em)
Panton blackh134411.244531.248581.2
Panton blackh230361.236431.240481.2
Panton blackh328361.332421.332421.3
Source Sans Pro (panton possible only for pricing tears titles in green)h424341.424341.424421.4
Source Sans ProText20301.520301.520301.5
Source Sans ProSmall text16241.516241.516241.5
Source Sans ProExtra small text14211.514211.514211.5


Typography guidelines for product will be defined in more detail

Download fonts

Source Sans Pro  Panton Black

Dos and don'ts

Typography guidelines will be defined more in detail for product.

Do

  • Set headlines, pull-outs, labels and buttons in Panton Black in capitals with +50 letter spacing
  • Center most headlines, but range left if preferred
  • Use Source Sans Pro in Light, Regular and Bold in upper and lower case
  • Set subheads in Source Sans Pro bold and body text in regular, either centered or ranged left
  • Use an en dash for bullet points; the en dash (–) is slightly wider than the hyphen (-) but narrower than the em dash (—)
  • Center columns of ranged left text on the page
  • Allow the type to reflow on responsive layouts, depending how viewed
  • Use Source Han Sans for Japanese text
  • Use titles that are short and punchy and be aware of how long titles are displayed on mobile

Don't

  • Use titles that are too long with Panton Black  

  • Use Open Sans, unless Source Sans Pro is unavailable.When using Open Sans, consider how text reflows as it is a ‘larger’ font than Source Sans Pro.

  • Use italics versions of our typefaces

  • Use long columns of centered text as they’re difficult to read

Brandbook-brand- typography | Pipedrive
Brandbook-brand- typography