Visual language
Typography
Our typefaces, the type scale and when to use which.
Typefaces
We use three typefaces, each with one job.
Poppins speaks. It is geometric, round and friendly, close in shape to our wordmark, and it gives headlines their character. We use it for display text, headlines, titles and button labels.
Figtree explains. It is open and friendly, close to Poppins in spirit but quieter, and very readable at small sizes, with clear figures for amounts and times. We use it for body text, labels, captions, tables and forms. It replaced Inter, which read cold next to the round Poppins.
JetBrains Mono spells out. Every character has the same width and none can be mistaken for another: the zero has a dot, and 1, l and I each look different. We use it only for codes someone has to copy or compare.
All three are free under the SIL Open Font License, on Google Fonts.
| Weights | Use | |
|---|---|---|
| Poppins | 500 Medium, 600 Semibold | Display, headlines, titles, buttons |
| Figtree | 400 Regular, 500 Medium, 600 Semibold | Body, small labels, captions, numbers |
| JetBrains Mono | 400 Regular, 500 Medium | Codes |
We don't use Poppins below 14px, and we don't use Figtree for headlines.
When a typeface can't be loaded, as in email, fall back to the system font: -apple-system, 'Segoe UI', Roboto, sans-serif, and for codes ui-monospace, 'SF Mono', Menlo, monospace.
Type scale
Eighteen styles, named the way Material 3 and the app name them: the fifteen the app and the website share, and three that only the website uses. Poppins sets everything that speaks: display, headlines, titles and button labels. Figtree sets everything you read: body text, small labels and numbers. Samples above 36px are shown smaller; the size column has the real size.
| Sample | Token | Typeface | Size / line | Use |
|---|---|---|---|---|
| 08:12 | heroNumber | Poppins 600 | 144 / 144 | Website only. The one big number a section is built around, like the time in A day in the city. |
| Parking, but simple. | displayXl | Poppins 600 | 72 / 76 | Website only. The home page title and the big number in the proof band. |
| Parked. | displayLg | Poppins 600 | 57 / 64 | Hero numbers and one-word statements on the website. |
| € 7.04 | displayMd | Poppins 600 | 45 / 52 | Website hero headlines. |
| 1 h 30 min | displaySm | Poppins 600 | 36 / 44 | Section openers on the website. |
| Your parking | headlineLg | Poppins 600 | 28 / 40 | Screen titles in the app, page headlines. |
| Your parking | headlineMd | Poppins 600 | 24 / 32 | Headlines in sheets and dialogs. |
| Your parking action | headlineSm | Poppins 600 | 22 / 28 | Smaller headlines and card titles on the website. |
| Keizersgracht | titleLg | Poppins 500 | 18 / 26 | Card titles and list headers. |
| Zone 12100, Keizersgracht | titleMd | Poppins 500 | 16 / 24 | List item titles. |
| Zone 12100, Keizersgracht | titleSm | Poppins 500 | 14 / 20 | Small titles and section labels. |
| We stop at 17:30. | bodyXl | Figtree 400 | 18 / 28 | Website only. Body text on the website: the paragraph under a title and the prose of a reading page. |
| We stop at 17:30. | bodyLg | Figtree 400 | 16 / 24 | Body text on the website and in long app texts. |
| We stop your parking action at 17:30. | bodyMd | Figtree 400 | 14 / 22 | The default body text in the app. |
| Example rates. The app shows the exact rate. | bodySm | Figtree 400 | 12 / 18 | Captions, footnotes and helper text. |
| Start parking | labelLg | Poppins 500 | 16 / 16 | Large buttons. |
| View invoice | labelMd | Poppins 500 | 14 / 14 | Buttons, tabs and segmented controls. |
| Ends soon | labelSm | Figtree 500 | 12 / 12 | Tags, chips and small labels. Figtree, because Poppins stays at 14px and up. |
Sizes are in px, pt in the app. Letter spacing is 0 for every style. Headlines are set in navy, never in light gray. Keep headlines short enough to fit on two lines on a phone.
On smaller screens
The app has one screen size; the website does not. On the website the large styles step down the scale on smaller screens, so a headline still fits on two lines on a phone. Everything from headlineLg down stays the same size everywhere.
| Style | Tablet (up to 1024px) | Phone (up to 768px) |
|---|---|---|
heroNumber | displayXl | displayLg |
displayXl | displayLg | displaySm |
displayLg | displayMd | displaySm |
displayMd | displaySm | headlineLg |
displaySm | displaySm | headlineLg |
The step is always to another style on the scale, never to a size in between.
On the website
A website is read from further away than a phone, so body and title text on the website sit one step up the scale from where the app has them. The headlines, display styles and labels stay as they are.
| Text | In the app | On the website |
|---|---|---|
| Body text, the paragraph under a title | bodyLg | bodyXl |
| Text in a card or a row | bodyMd | bodyLg |
| Captions, footnotes, helper text | bodySm | bodyMd |
| Small titles and section labels | titleSm | titleMd |
| List item titles | titleMd | titleLg |
| Card titles | titleLg | headlineSm |
Numbers and codes
Amounts, times and durations are the most important text we show.
- Set them in Figtree with tabular figures (
font-variant-numeric: tabular-nums), so a running timer or a column of amounts doesn't jump. - Write them the way the writing rules say: € 0.29 · 17:30 · 2 hours.
- A large number, like the time left on a parking action, may use Poppins Semibold.
- Codes are set in JetBrains Mono: invite codes, payment references, invoice numbers, and colors and tokens in our own documentation. Use it at the same size as the text around it, or one step smaller.
- Amounts, times, dates and zone codes are not codes in this sense. They stay in Figtree. If it is something people read rather than type, it isn't mono.
- License plates are shown in the license plate component, not typed out in a typeface that imitates a plate.