Typography
Our typographic system is built on legibility and accessibility. It's clear, bold, and — when we use our international glyphs — endlessly expressive.
Switzer
Clean, geometric,
considered.
Tanker
On the green.
Fonts
Two typefaces. One for almost everything, one for moments that deserve to stand out.
Switzer
Switzer's appearance is classic and timeless; it might resemble earlier typefaces, but it is a new design made for our time. Use Switzer for most things.
Tanker
Tanker is a single-weight, lowercase-only, condensed sans serif. We only use the lowercase version. Use it on big headings for web and marketing, or sparingly in product to celebrate something.
Text Styles
golf
For major celebratory moments. Use sparingly — one per screen maximum.
Display Big
Tanker · Regular · 96px · 85% LH
golf
For impactful screen headings where Tanker adds energy without overwhelming.
Display Base
Tanker · Regular · 64px · 85% LH
Screen title
Use only once, per screen. Pairs perfectly with body text, or body title if you need a larger subheading before body text.
Screen title
Switzer · Semi bold · 36px · 44px LH · −2.5% LS
Section title
For primary page and screen titles. One per view.
Section title
Switzer · Semi bold · 26px · 32px LH · −1.5% LS
Subsection title
To distinguish major sections within a screen or page.
Subsection title
Switzer · Semi bold · 22px · 28px LH · −1% LS
Body title
For titles within cards, list headers, or to introduce a body of text.
Body title
Switzer · Semi bold · 18px · 24px LH · −1% LS
The quick brown fox jumps over the lazy dog
The primary reading size. Use for all standard body copy and descriptions.
Body default
Switzer · Regular · 16px · 24px LH · −0.05% LS
The quick brown fox jumps over the lazy dog
To add emphasis within body copy, or for labels on interactive elements like buttons.
Body default bold
Switzer · Semi bold · 16px · 24px LH · −0.05% LS
The quick brown fox jumps over the lazy dog
For help text, captions, and secondary information.
Body small
Switzer · Regular · 14px · 22px LH · 1% LS
The quick brown fox jumps over the lazy dog
For small labels that need emphasis, such as status indicators or tags.
Body small bold
Switzer · Semi bold · 14px · 22px LH · 1% LS
View all activity →
For all inline links within body text.
Link default
Switzer · Semi bold · 16px · 24px LH · −0.05% LS
View details →
For links within help text or small interactive elements.
Link small
Switzer · Semi bold · 14px · 22px LH · 1% LS
Latest results
For labelling groups of items in a list, menu, or form. Always uppercase.
Group title
Switzer · Medium · 14px · 20px LH · 1.5% LS · Uppercase
Using Tanker
Use Tanker for key celebration, success or announcements to add extra impact to the experience. It's designed to be short, sharp and stand out. It shouldn't be overdone.
Use it in places like:
- Success screens — your event is live!
- Success progress screens — sit back and relax
It can also be used sparingly across product to enhance key brand features where relevant. These can be reviewed on a case by case basis.