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