H1 / page title
A system for work that moves.
clamp(40px, 6vw, 82px) / 0.98 / 800
Documentation / foundations / tokens
Typography
Fonts and text styles for page titles, sections, body text, labels and metadata.
How to read the values
The type tokens below are written in a short form. Under each one there is a plain-language reading of what it means.
size / line height / weight- Type values are written in this order, separated by slashes. For example 15px / 1.6 means 15px text with a line height of 1.6.
clamp(22px, 2.4vw, 32px)- A size that changes with the screen. The first number is the smallest size, the last is the largest, and the middle one is how fast it grows: 2.4vw is 2.4% of the browser window width. The text is never smaller than 22px or larger than 32px.
Line height 1.1- The space for one line of text, as a multiple of the font size. 1.1 is tight and suits headings. 1.6 is airy and suits paragraphs.
Weight 800- How thick the letters are. 400 is regular, 600 is semi bold, 700 is bold and 800 is extra bold.
+8% and uppercase- Letter spacing adds space between letters, as a percentage of the font size. Uppercase shows the text in capital letters. Both are used on small labels and table headers.
Paragraph width
Long lines are hard to follow. A comfortable line holds 45 to 75 characters. The table shows what that means in pixels for Montserrat, which is a wide typeface, so the numbers are approximate.
The token width.text sets the hard maximum to 800px. At 15px that is about 95 characters, so it is a ceiling, not a target: where you can, keep text closer to the range below, for example with width.text-narrow (600px) for intros.
| Font size | Comfortable width (45–75 characters) |
|---|---|
| 12px | 300–500px |
| 14px | 350–585px |
| 15px (body text) | 375–625px |
| 16px | 400–670px |
| 18px (lead text) | 450–750px |
Rendered preview
See the scale in context.
H2 / section heading
The foundation layer.
clamp(30px, 4vw, 52px) / 1.05 / 800
H3 / component heading
Activation rate
clamp(22px, 2.4vw, 32px) / 1.1 / 800
H4 / subsection heading
How it's used?
19px / 1.2 / 700
Typography tokens
16 valuesfont.family.displayMontserratHeadings and interface labels.
font.family.monoIBM Plex MonoToken names and metadata.
font.heading.h1
clamp(40px, 6vw, 82px) / 0.98 / 800
Page titles and primary entry points.
- Size: grows with the screen, from 40px on a small screen up to 82px on a large one (in between it is 6% of the screen width).
- Line height: 0.98 times the font size.
- Weight: 800 (Extra bold).
font.heading.h2
clamp(30px, 4vw, 52px) / 1.05 / 800
Major section headings.
- Size: grows with the screen, from 30px on a small screen up to 52px on a large one (in between it is 4% of the screen width).
- Line height: 1.05 times the font size.
- Weight: 800 (Extra bold).
font.heading.h3
clamp(22px, 2.4vw, 32px) / 1.1 / 800
Component and content-group headings.
- Size: grows with the screen, from 22px on a small screen up to 32px on a large one (in between it is 2.4% of the screen width).
- Line height: 1.1 times the font size.
- Weight: 800 (Extra bold).
font.heading.h4
19px / 1.2 / 700
Subsections and compact panel headings.
- Size: 19px, the same on every screen.
- Line height: 1.2 times the font size, about 23px between lines.
- Weight: 700 (Bold).
font.size.body
15px / 1.6
Default reading size.
- Size: 15px, the same on every screen.
- Line height: 1.6 times the font size, about 24px between lines.
font.size.body-large
18px / 1.6
Introductory and lead copy.
- Size: 18px, the same on every screen.
- Line height: 1.6 times the font size, about 29px between lines.
font.size.label
11px / 1.2 / 600 / uppercase
Eyebrows, labels, and section markers.
- Size: 11px, the same on every screen.
- Line height: 1.2 times the font size, about 13px between lines.
- Weight: 600 (Semi bold).
- Capitals: the text is shown in capital letters.
font.size.metadata
12px / 1.4 / 500
Token values, timestamps, and supporting metadata.
- Size: 12px, the same on every screen.
- Line height: 1.4 times the font size, about 17px between lines.
- Weight: 500 (Medium).
font.size.title
clamp(40px, 6vw, 82px) / 0.98
Display title scale.
- Size: grows with the screen, from 40px on a small screen up to 82px on a large one (in between it is 6% of the screen width).
- Line height: 0.98 times the font size.
font.size.small
14px / 1.43
Text inside controls, tabs, links and table cells.
- Size: 14px, the same on every screen.
- Line height: 1.43 times the font size, about 20px between lines.
font.size.small-strong
14px / 1.43 / 600
Field labels, tabs and navigation links.
- Size: 14px, the same on every screen.
- Line height: 1.43 times the font size, about 20px between lines.
- Weight: 600 (Semi bold).
font.size.caption
12px / 1.33
Hints and supporting text.
- Size: 12px, the same on every screen.
- Line height: 1.33 times the font size, about 16px between lines.
font.size.caption-strong
12px / 1.33 / 600
Error messages and status labels.
- Size: 12px, the same on every screen.
- Line height: 1.33 times the font size, about 16px between lines.
- Weight: 600 (Semi bold).
font.size.table-header
12px / 1.33 / 400 / +8% / uppercase
Table column headers.
- Size: 12px, the same on every screen.
- Line height: 1.33 times the font size, about 16px between lines.
- Weight: 400 (Regular).
- Letter spacing: +8% of the font size, so letters sit slightly further apart.
- Capitals: the text is shown in capital letters.