Body & headings ES Rebond Grotesque Regular 400 Medium 500
--font-body Serif accent Tiempos Text Regular Italic 400 — the only cut
--font-display Style Size Font & weight Sample
Display --fs-display
48 → 104px fluid
Rebond Medium 500
Alchemy
H1 --fs-h1
40 → 72px fluid
Rebond Medium 500
Heading one
H2 --fs-h2
32 → 52px fluid
Rebond Medium 500
Heading two
H3 --fs-h3
24 → 32px fluid
Rebond Medium 500
Heading three
H4 --fs-h4
20 → 24px fluid
Rebond Medium 500
Heading four
Eyebrow --fs-eyebrow Label above headings (hero, sections). Same size as Body 1, Medium 500, no uppercase.
18 → 20px fluid
Rebond Medium 500
Sparklin — by Alchemy Zürich
Body 1 --fs-body-1 Large body & lead paragraphs. Nav links use this size.
18 → 20px fluid
Rebond Regular 400
The quick brown fox jumps over the lazy dog.
Body 2 --fs-body-2 Default body text and most links.
17px fixed
Rebond Regular 400
The quick brown fox jumps over the lazy dog.
Body 3 --fs-body-3 Small text — captions, footnotes, small links.
15px fixed
Rebond Regular 400
The quick brown fox jumps over the lazy dog.
Label --fs-label Form field labels. Same size as Body 3 (15px) but Medium 500. Sentence case.
15px fixed
Rebond Medium 500
Email address
Helper --fs-helper Form helper & error text under an input. Sentence case, not uppercase.
13px fixed
Rebond Regular 400
We’ll only use this to reply.
Button / Label --fs-button Buttons & interactive labels. Same size as Body 2, Medium 500, line-height 1.
17px fixed
Rebond Medium 500
Start building
Labels & tags
Small non-body styles used across the site. These carry their own case, spacing or font, so they sit outside the plain size scale above.
CASE STUDY
Tag / Badge Use the .t-tag class · 12px · Medium 500 · uppercase · letter-spacing 0 Pill labels — CASE STUDY, footer titles, SOON chips. Uppercase is fine; letter-spacing is ALWAYS 0.
01
Numbered label Rebond · Body 2 · Medium 500 · violet Step / feature numbers (wizard, feature cards).
alchemy.zuerich
Mono label Courier mono · 12px · +0.03em Browser-frame URLs, slider captions, code chips.
Serif accent in headings
Headings are set in Rebond, but one or two accent words are swapped to Tiempos italic for emphasis — via the .t-serif class (or a scoped em). It’s Tiempos Text, italic, weight 400 — the only cut we load. Use it for accent words inside a heading; never for body copy or full lines. The accent stays the same colour as the rest of the heading — never a second colour.
Display Every part of your business, guided.
H1 Every part of your business, guided.
H2 Every part of your business, guided.
H3 Every part of your business, guided.
Class.t-serif
Font--font-display · Tiempos Text
StyleItalic
Weight400 (Regular)
How type scales
The sizes above marked fluid aren’t two fixed values — they’re a continuous range. Each uses clamp(min, Nvw, max): it holds at the min on small screens, scales smoothly with viewport width through the middle, then holds at the max once it reaches the cap. So 40 → 72px means “never smaller than 40, never larger than 72, and everything in between as the window grows.” There is no breakpoint where it snaps. Sizes marked fixed stay the same at every width.
Example: --fs-h1 is 40px up to ~667px wide, then scales (54px at 900px, exactly 6vw), and caps at 72px from ~1200px up.
Type scales fluidly, so it doesn’t depend on the breakpoints — but the page layout does. See the six Alchemy breakpoints on Layout.
Heading with accent — single colour (the rule):
Every part of your business, guided.
