Typography
Poppins, one family; fourteen roles, each one role in three canvases — the deck, the web, the phone; weight is meaning.
Roles × canvas modes
Section titled “Roles × canvas modes”Each cell is size · weight · line height · tracking.
| Role | web-desktop | web-tablet | web-mobile | slide |
|---|---|---|---|---|
display/large |
148 · 600 · 1.2 · −0.01 em | 148 · 600 · 1.2 · −0.01 em (inherited) | 148 · 600 · 1.2 · −0.01 em (inherited) | 148 · 600 · 1.2 · −0.01 em (inherited) |
display/medium |
117 · 600 · 1.2 · −0.01 em | 117 · 600 · 1.2 · −0.01 em (inherited) | 117 · 600 · 1.2 · −0.01 em (inherited) | 117 · 600 · 1.2 · −0.01 em (inherited) |
display/small |
92 · 600 · 1.2 · −0.01 em | 92 · 600 · 1.2 · −0.01 em (inherited) | 92 · 600 · 1.2 · −0.01 em (inherited) | 64 · 600 · 1.2 · 0 |
headline/large |
65 · 600 · 1.2 · 0 | 65 · 600 · 1.2 · 0 | 48 · 600 · 1.2 · 0 | 66 · 600 · 1.2 · −0.01 em |
headline/medium |
45 · 600 · 1.2 · 0 | 45 · 600 · 1.2 · 0 | 40 · 600 · 1.2 · 0 | 46 · 500 · 1.2 · −0.01 em |
headline/small |
40 · 400 · 1.2 · 0 | 40 · 400 · 1.2 · 0 | 32 · 400 · 1.2 · 0 | 41 · 400 · 1.5 · 0 |
title/large |
36 · 600 · 1.2 · 0 | 32 · 600 · 1.2 · 0 | 32 · 600 · 1.2 · 0 | 36 · 600 · 1.2 · 0 |
title/medium |
32 · 600 · 1.2 · 0 | 28 · 600 · 1.2 · 0 | 28 · 600 · 1.2 · 0 | 32 · 600 · 1.2 · 0 (inherited) |
title/small |
28 · 500 · 1.4 · 0 | 25 · 500 · 1.4 · 0 | 25 · 500 · 1.4 · 0 | 26 · 500 · 1.4 · 0 |
body/large |
22 · 400 · 1.4 · 0 | 18 · 400 · 1.4 · 0 | 18 · 400 · 1.4 · 0 | 26 · 400 · 1.4 · 0 |
body/medium |
18 · 400 · 1.4 · 0 | 16 · 400 · 1.4 · 0 | 16 · 400 · 1.4 · 0 | 20 · 400 · 1.4 · 0 |
body/small |
16 · 400 · 1.5 · 0 | 14 · 400 · 1.5 · 0 | 14 · 400 · 1.5 · 0 | 18 · 500 · 1.4 · 0 |
body/x-small |
14 · 400 · 1.7 · 0 | 12 · 400 · 1.7 · 0 | 12 · 400 · 1.7 · 0 | 14 · 400 · 1.7 · 0 (inherited) |
label/medium |
12 · 500 · 1.4 · +0.1 em | 12 · 500 · 1.4 · +0.1 em (inherited) | 12 · 500 · 1.4 · +0.1 em (inherited) | 15 · 400 · 1.4 · 0 |
Weights
Section titled “Weights”- SemiBold 600 — display, headline and card titles. A display weight, never on body text.
- Medium 500 — body-sized emphasis: buttons, labels, dialog titles, the H2 subtitle, the deck card title.
- Regular 400 — reading text, nav links, table cells, breadcrumbs.
- Bold 700 — where the deck sets it: row headers, cover and chapter titles. No Light, no Black.
On the Figma page
Section titled “On the Figma page”Each row is one role; the three columns are the same bound text in a frame whose Typography mode is set to web-desktop, web-mobile or slide — the variable does the resizing, nothing is retyped. The caption under each sample is the mode’s size · weight · line-height ratio · tracking, read from the variables at build time. Line height is AUTO in every sample: the roles carry ratios (1.2 · 1.4 · 1.5 · 1.7) that Figma cannot bind as-is, and Poppins AUTO renders 1.5; the ratios are shown beside each sample. Tracking likewise (−0.01em, 0.1em) is a ratio and is shown, not bound. Weights strip: SemiBold 600 for display and titles, Medium 500 for body-sized emphasis (buttons, labels, dialog titles, the H2 subtitle), Regular 400 for reading text; Bold 700 only where the deck sets it (the table’s row header, cover and chapter titles, the cover badge, the case-study logo). Sentence case everywhere — no ALL CAPS except the site’s eyebrow and the rail’s section titles, which are labels (Writing rules).
The same page in the Figma library: Typography.
Pepper UI v1.5.0
The Mobupps design system. 386 tokens, 88 components, 65 pages in the workshop — every page of this site generated from the repository, so nothing here is typed twice.