Foundations

Typography

Thirteen text styles in two typefaces. Every text on a screen takes one — and grows with the system text size by the style's own rule.

v3.6.3 PP Agrandir · Suisse Intl
Overview

Text hierarchy

A text style sets the typeface, weight, size, line height and tracking of a text together. The style says what the text is — a heading, body copy, a link, a caption — so the order a screen is read in comes from its styles, not from a size picked by hand.

Scenario 1
One screen, three levels.
On the map screen the destination prompt is the heading — Heading 2. The places a person has been to are Main Body, and the line under each, the address, is Compact Body. The eye goes from the prompt to the places to the details.
Cartagena
CL. 125 # 70B-13
Barranquilla
CL. 126 # 70B-14
Medellín
CL. 45 # 52-10
Typefaces

Two typefaces, fixed roles

PP Agrandir is the display face: it sets the four large headings and nothing else. Suisse Intl is the interface face and sets every other style. A style brings its typeface with it, so a component never picks a font on its own.

PP Agrandir
Only for large headings.
Large Numbers, Promo Heading, Heading 1 and Heading 2, in Bold only. Never on body text or small UI. The one button it reaches is Main CTA, whose label is Heading 2. It has no Cyrillic: a Cyrillic letter in these styles falls back to Suisse Intl Bold.
Suisse Intl
Everything else.
Heading 3, Heading 4 and every Body, Link and Caption style. Three weights: Book for text and links, SemiBold for Heading 4, Bold for Heading 3.
PP Agrandir Display · Bold
1 234 Large Numbers · Bold 700 · 72 / 72
Where to? Promo Heading · Bold 700 · 40 / 44
Where to? Heading 1 · Bold 700 · 32 / 36
Where to? Heading 2 · Bold 700 · 24 / 28
Куда и за сколько? Cyrillic in Heading 2 · falls back to Suisse Intl Bold
Suisse Intl Interface · Book · SemiBold · Bold
Where to? Heading 3 · Bold 700 · 20 / 28
Where to? Heading 4 · SemiBold 600 · 17 / 20
Where to? Main Body · Book 400 · 16 / 20
Where to? Caption · Book 400 · 12 / 16
Styles

Thirteen styles at three text sizes

Every style at the three system text sizes: 100% as the interface ships, 130% and 150% as a person sets them in the system settings. The sizes under each sample are read from the tokens on this page; where a size stops growing, it is marked held.

100%As shipped 130%Large text 150%Maximum
Heading
Large Numbers PP Agrandir · Bold · fixed --text-heading-large-numbers-*
1 234
1 234
1 234
Promo Heading PP Agrandir · Bold · fixed --text-heading-promo-heading-*
Where to?
Where to?
Where to?
Heading 1 PP Agrandir · Bold · fixed --text-heading-heading1-*
Where to?
Where to?
Where to?
Heading 2 PP Agrandir · Bold · cap130 --text-heading-heading2-*
Where to?
Where to?
Where to?
Heading 3 Suisse Intl · Bold · cap130 --text-heading-heading3-*
Where to?
Where to?
Where to?
Heading 4 Suisse Intl · SemiBold · full --text-heading-heading4-*
Where to?
Where to?
Where to?
Body
Promo Body Suisse Intl · Book · cap130 --text-body-promo-body-*
Where to?
Where to?
Where to?
Body Paragraph Suisse Intl · Book · full --text-body-body-paragraph-*
Where to?
Where to?
Where to?
Main Body Suisse Intl · Book · full --text-body-main-body-*
Where to?
Where to?
Where to?
Compact Body Suisse Intl · Book · full --text-body-compact-body-*
Where to?
Where to?
Where to?
Link
Main Link Suisse Intl · Book · full --text-link-main-link-*
Where to?
Where to?
Where to?
Compact Link Suisse Intl · Book · full --text-link-compact-link-*
Where to?
Where to?
Where to?
Caption
Caption Suisse Intl · Book · full --text-caption-caption-*
Where to?
Where to?
Where to?
Scaling

How text grows

When a person turns up the system text size, the interface follows in two steps, 130% and 150%. Each style grows by one of three rules — and the SP lengths around the text by the same three, so a component keeps its proportions.

fixed
The large headings hold.
Large Numbers, Promo Heading and Heading 1 keep their size at every step. They are large enough already, and growing further would break the layout.
cap130
The middle headings stop at 130%.
Heading 2, Heading 3 and Promo Body grow to 130% and hold that size at 150%, so they never pull weight away from the smaller text under them.
full
Everything people read grows all the way.
Heading 4, Body Paragraph, Main Body, Compact Body, both Link styles and Caption grow ×1.3 at 130% and ×1.5 at 150%. This is the text large-text settings exist for.
100%As shipped
Cartagena
CL. 125 # 70B-13
Barranquilla
CL. 126 # 70B-14
130%Large text
Cartagena
CL. 125 # 70B-13
Barranquilla
CL. 126 # 70B-14
150%Maximum
Cartagena
CL. 125 # 70B-13
Barranquilla
CL. 126 # 70B-14
Usage

Which style where

Pick a style by the role of the text, not by the size it should look. Answer the questions from the top: the first one that fits gives the style.

1A large number?
1 234
2A screen heading, or a promo?
Promo HeadingHeading 1
3A second-level heading, or the Main CTA label?
Heading 2
4A nested section heading?
Heading 3Heading 4
5The main text of a screen?
Main Body
6A long text — paragraphs?
Body Paragraph
7Text in a compact element — chips, a switch?
Compact Body
8A link in the text?
Main LinkCompact Link
9Technical data, legal text, a footnote?
Caption
Large Numbers
Digits only.
A price, a time, a count — never words. Figma describes the style as dedicated only for numbers.
Promo Heading · Heading 1
Screen level only.
The heading of a screen or a promo. Never inside a card or a list.
Heading 2
On a button, only Main CTA.
A button label follows the button's size, not its style: Main CTA takes Heading 2, L takes Heading 4, M and S take Main Body.
Heading 3 · Heading 4
Nested, never the main heading.
Heading 3 is never the only heading of a screen or a bottom sheet. Heading 4 marks emphasis inside text, not a block of its own.
Body
Main Body unless there is a reason.
Body Paragraph is for long reads, Promo Body only next to Promo Heading or Heading 1. Compact Body belongs to dense components — never a way to fit more text.
Link · Caption
Links underlined, captions secondary.
A link always carries its underline, in TextAndIcon/Accent; Main Link goes with Main Body, Compact Link with Compact Body. Caption is for supplementary text only, in TextAndIcon/Secondary.
Accessibility

Text people can read

Typography carries three accessibility contracts: text grows with the system text size, nothing is set below 12px, and a link never relies on colour alone.

Links
Underlined, always.
Main Link and Compact Link keep their underline in every context. Removing it leaves colour as the only signal, which the DS does not allow.

Read the terms of the ride before you order.

✓ Main Link with its underline — it reads as a link without its colour.

Read the terms of the ride before you order.

✕ The underline taken away — colour alone marks the link.
Minimum size
Nothing below 12px.
Caption, 12px, is the smallest style in the system, and it is for non-interactive content only. No text anywhere is set smaller.

Economy · $12

The fare includes tolls

✓ Caption as a footnote — supplementary, nothing to tap.

Pickup · CL. 45 # 52-10 Change

✕ Caption as an action — an action is a Link or a Button.
Text size
Text follows the system size.
At 130% and 150% every style grows by its rule (see Scaling). The 150% step is there for people with low vision, set in the system settings.
100%

The driver arrives in 4 min

130%

The driver arrives in 4 min

150%

The driver arrives in 4 min

Disabled
Disabled text may fall below AA.
Text in TextAndIcon/Disabled does not pass WCAG AA contrast, at Caption size least of all. The DS accepts that for disabled states only.
✓ A disabled Cell — the grey says it cannot be used.

The driver arrives in 4 min

✕ Live information in the Disabled grey — it reads as unavailable and fails AA.