Typography

AaBbCcDdEeFf

Our typography is a visual representation of our brand personality and voice. It influences how we use language and sets the tone for all things Ben.

Our typefaces

Type tester

Platform Medium

Subheadings in Saans Medium

Consistent and moderate. No bells or whistles. Easy to read and works well with our headline typeface.

Type specifications

These are our primary brand fonts. Use the leading and tracking values stated below to ensure our typography always appears consistently.

Signposting

• Saans Medium
  Leading: 100% / 1 em
  Tracking: 0
  Case: Sentence

Headlines

• Platform Medium
  Leading: 100% / 1 em
  Tracking: -1% / -0.01 em
  Case: Sentence

Sub-Headlines

• Saans Medium
  Leading: 130% / 1.3 em
  Tracking: 0
  Case: Sentence

Body Copy

• Saans Regular
  Leading: 130% / 1.3 em
  Tracking: 0
  Case: Sentence

Buttons

• Saans Medium
  Leading: 100% / 1 em
  Tracking: 0
  Case: Sentence

Flexible allowances and benefits marketplace

The world of work runs on Ben

Powered by Ben: Funding Circle

Nobody knows your team as well as they do. So let them choose the benefits that matter to them – with personal benefits budgets you control on our marketplace or through their Ben Mastercard benefits.

Button

Type alignment

We only ever set our typography in two ways, left-aligned or centre-aligned. Layout or application will be the deciding factor; however, below is a brief guide on why we use one or the other.

_1699974158431_1000x1000.png?alt=media&token=3ghrx5x15l0)

Left-aligned

When we want to be as clear as possible, left-aligned is the best option.

_1699974161313_1000x1000.png?alt=media&token=7vf8k0jn2o5)

Centre-aligned

When we want to be bolder and hero the messaging, we can switch to centre-aligned.

Pull-out quotes

When we need to pull out an important quote, in a blog, newsletter, or just on the website. We use our gradient as a highlighting stroke to bring more attention to what we’re saying.

_1699974156088_1000x1000.png?alt=media&token=jaq695p20wr)

Google alternatives

These are always our fall-back fonts. We only use system alternatives when it is impossible to use these Google alternatives.

Signposting

• DM Sans Medium
  Leading: 100% / 1 em
  Tracking: 0
  Case: Sentence

Headlines

• Red Hat Display Bold
  Leading: 94% / 0.94 em
  Tracking: -4% / -0.04 em
  Case: Sentence

Sub-Headlines

• DM Sans Medium
  Leading: 130% / 1.3 em
  Tracking: 0
  Case: Sentence

Body Copy

• DM Sans Regular
  Leading: 130% / 1.3 em
  Tracking: 0
  Case: Sentence

Buttons

• DM Sans Medium
  Leading: 100% / 1 em
  Tracking: 0
  Case: Sentence

Flexible allowances and benefits marketplace

The world of work runs on Ben

Powered by Ben: Funding Circle

Button

System alternatives

When we can’t use our brand typefaces or Google alternatives, we revert to these fonts.

Signposting

• Arial Regular
  Leading: 100% / 1 em
  Tracking: 0
  Case: Sentence

Headlines

• Arial Bold
  Leading: 94% / 0.94 em
  Tracking: -5% / -0.05 em
  Case: Sentence

Sub-Headlines

• Arial Regular
  Leading: 130% / 1.3 em
  Tracking: -1% / -0.01 em
  Case: Sentence

Body Copy

• Arial Regular
  Leading: 130% / 1.3 em
  Tracking: 0
  Case: Sentence

Buttons

• Arial Regular
  Leading: 100% / 1 em
  Tracking: 0
  Case: Sentence

Typography terminology

• Tracking: Also known as letter spacing, this is the horizontal space between individual characters, applied to all lines of text equally.
• Leading: Also known as line spacing, this is the vertical space between lines of text. We like to keep this on the tighter side.
• Kerning: Kerning is the precise spacing between two individual characters. Kerning is not typically practiced in digital settings, so we avoid this wherever possible.

Things to avoid

Don’t outline text

Don’t use unapproved colours

Don’t distort or tilt text

Don’t use capitals

Don’t set text tighter than recommended

Don’t align text incorrectly.