Typography
The production text-style catalogue. Every role ships an explicit
Large and Small variant that you pick
manually. Each variant is a semantic token set (--type-*)
resolving through the primitive scale — no hard-coded sizes, weights,
line-heights or tracking anywhere.
Line-height follows the size, not the role. Three bands, straight from the Figma spec:
text ≤ 18px uses
Tracking follows the role, not the size. Display and all headings (H1–H4) always use
--leading-150 (150%), 18–64px uses
--leading-125 (125%), and ≥ 64px uses --leading-100
(100%). The single-line UI roles (label, nav, badge) use 100% on
purpose.
Tracking follows the role, not the size. Display and all headings (H1–H4) always use
--tracking-tight (−5%), regardless
of their size — this is what gives editorial type its condensed feel.
Every other role stays at normal or wide tracking.
Font family & weights
Primary familyvar(--font-brand)
the quick brown fox jumps over the lazy dog
A clean, geometric sans-serif. Supreme LL is the only named face — no substitute fonts, so type is always the real brand voice.
--font-brand → "Supreme LL", sans-serif
Light300
Aa
Display, all headings (H1–H4), Body and Caption — the brand's signature editorial weight, used broadly across text.
--font-weight-light → 300
Regular400
Aa
Spec table labels only — the one role that stays at the default weight.
--font-weight-normal → 400
Medium500
Aa
UI elements — navigation, labels, spec values.
--font-weight-medium → 500
Bold700
Aa
Badges, pricing, and other emphasis that needs to stand out from Light headings.
--font-weight-bold → 700
Type scale — Large & Small
Display / Hero · Light · 100% · −5%.gz-text-display-lg · -sm
Start je e-bike avontuur
Large --text-80 → 80px
Start je e-bike avontuur
Small --text-64 → 64px
Homepage banner. Large for full-bleed heroes, Small for tighter layouts.
Heading 1 · Light · 125% · −5%.gz-text-h1-lg · -sm
Alle e-bike modellen
Large --text-48 → 48px
Alle e-bike modellen
Small --text-40 → 40px
Page title.
Heading 2 · Light · 125% · −5%.gz-text-h2-lg · -sm
De kroon op ons werk
Large --text-40 → 40px
De kroon op ons werk
Small --text-32 → 32px
Section titles — “Hulp nodig?”.
Heading 3 · Light · 125% · −5%.gz-text-h3-lg · -sm
Ultimate C380
Large --text-32 → 32px
Ultimate C380
Small --text-28 → 28px
Card titles, category blocks — “Comfort”.
Heading 4 · Light · 125% · −5%.gz-text-h4-lg · -sm
Middenmotor met 80 Nm koppel
Large --text-24 → 24px
Middenmotor met 80 Nm koppel
Small --text-20 → 20px
Product card features, review titles.
Body · Light · 150%.gz-text-body-lg · -sm
Wij geloven dat fietsen jou én de wereld beter maakt. Daarom bouwen we al meer dan 130 jaar fietsen waar je op kunt vertrouwen.
Large --text-18 → 18px · lead / intro
De Ultimate C380 combineert een onderhoudsarme Enviolo-naaf met een Bosch middenmotor. Daardoor schakel je volledig automatisch en rijd je comfortabel door de stad.
Small --text-16 → 16px · default paragraph
Long-form copy. Large for lead paragraphs, Small for standard body.
Caption / Legal · Light · 150%.gz-text-caption-lg · -sm
Per maand vanaf € 103,24
Large --text-14 → 14px · finance / helper
© 2026 Koninklijke Gazelle N.V. Alle rechten voorbehouden. Genoemde actieradius is een indicatie en kan afwijken.
Small --text-12 → 12px · micro / disclaimers
Supporting text, finance details, copyright and cookie notices.
UI & component typography
Label / eyebrow · Medium · uppercase.gz-text-label-lg · -sm
Nieuw in de collectie
Nieuw in de collectie
Eyebrows above titles. Uppercase with wide tracking. Large 14px, Small 12px.
weight --font-weight-mediumleading --leading-100tracking --tracking-wide
Navigation & tabs · Medium · 100%.gz-text-nav-lg · -sm
Top menu and sticky product-page tabs. Large 16px, Small 14px.
weight --font-weight-mediumleading --leading-100tracking --tracking-normal
Badge / tag · Bold · tracking.gz-text-badge-lg · -sm
Low-Step
High-Step
Nieuw
4.6 ★
Frame-type indicators and review scores. Large 14px, Small 12px.
weight --font-weight-boldleading --leading-100tracking --tracking-wide
Data table / tech specs.gz-text-spec-label-* · .gz-text-spec-value-*
| Accu laadtijd | 7 h 30 m |
| Motor locatie | Midden |
| Koppel | 80 Nm |
| Versnellingen | Enviolo traploos |
Muted labels paired with Medium values (or
.gz-text-spec-value-strong for Bold) so the column scans quickly. Large 14px, Small 12px.label --font-weight-normal · mutedvalue --font-weight-medium
Token reference
| CSS variable | Value | Tailwind | Figma variable |
|---|---|---|---|
| Font family | |||
--font-brand | "Supreme LL", sans-serif | font-brand | font-family/Supreme |
--font-sans | var(--font-brand) | font-sans | font-family/Supreme |
| Font size — named by pixel value | |||
--text-12 | 12px | text-12 | font-size/12 |
--text-14 | 14px | text-14 | font-size/14 |
--text-16 | 16px | text-16 | font-size/16 |
--text-18 | 18px | text-18 | font-size/18 |
--text-20 | 20px | text-20 | font-size/20 |
--text-22 | 22px | text-22 | font-size/22 |
--text-24 | 24px | text-24 | font-size/24 |
--text-28 | 28px | text-28 | font-size/28 |
--text-32 | 32px | text-32 | font-size/32 |
--text-40 | 40px | text-40 | font-size/40 |
--text-48 | 48px | text-48 | font-size/48 |
--text-56 | 56px | text-56 | font-size/56 |
--text-64 | 64px | text-64 | font-size/64 |
--text-80 | 80px | text-80 | font-size/80 |
--text-160 | 160px | text-160 | font-size/160 |
--text-320 | 320px | text-320 | font-size/320 |
| Font weight — four weights | |||
--font-weight-light | 300 | font-light | font-weight/font-light |
--font-weight-normal | 400 | font-normal | font-weight/font-regular |
--font-weight-medium | 500 | font-medium | font-weight/font-medium |
--font-weight-bold | 700 | font-bold | font-weight/font-bold |
| Letter-spacing — baked into text styles, not a Figma variable | |||
--tracking-tight | -0.05em | tracking-tight | — in text style |
--tracking-normal | 0 | tracking-normal | — in text style |
--tracking-wide | 0.8px | tracking-wide | — in text style |
--tracking-wider | 0.075em | tracking-wider | — in text style |
| Line height — three bands, baked into text styles, not a Figma variable | |||
--leading-100 | 1 · size ≥ 64px + single-line UI | leading-100 | — in text style |
--leading-125 | 1.25 · 18–64px | leading-125 | — in text style |
--leading-150 | 1.5 · size ≤ 18px | leading-150 | — in text style |
| Role | Class | Size | Weight | Leading | Tracking | Figma style |
|---|---|---|---|---|---|---|
| Display / Hero | .gz-text-display-lg | --text-80 | light | --leading-100 | --tracking-tight | Display/Large |
.gz-text-display-sm | --text-64 | light | --leading-100 | --tracking-tight | Display/Small | |
| Heading 1 | .gz-text-h1-lg | --text-48 | light | --leading-125 | --tracking-tight | Heading 1/Large |
.gz-text-h1-sm | --text-40 | light | --leading-125 | --tracking-tight | Heading 1/Small | |
| Heading 2 | .gz-text-h2-lg | --text-40 | light | --leading-125 | --tracking-tight | Heading 2/Large |
.gz-text-h2-sm | --text-32 | light | --leading-125 | --tracking-tight | Heading 2/Small | |
| Heading 3 | .gz-text-h3-lg | --text-32 | light | --leading-125 | --tracking-tight | Heading 3/Large |
.gz-text-h3-sm | --text-28 | light | --leading-125 | --tracking-tight | Heading 3/Small | |
| Heading 4 | .gz-text-h4-lg | --text-24 | light | --leading-125 | --tracking-tight | Heading 4/Large |
.gz-text-h4-sm | --text-20 | light | --leading-125 | --tracking-tight | Heading 4/Small | |
| Body | .gz-text-body-lg | --text-18 | light | --leading-150 | normal | Body/Large |
.gz-text-body-sm | --text-16 | light | --leading-150 | normal | Body/Small | |
| Caption / Legal | .gz-text-caption-lg | --text-14 | light | --leading-150 | normal | Caption/Large |
.gz-text-caption-sm | --text-12 | light | --leading-150 | normal | Caption/Small | |
| Label / eyebrow | .gz-text-label-lg | --text-14 | medium | --leading-100 | --tracking-wide | Label/Large |
.gz-text-label-sm | --text-12 | medium | --leading-100 | --tracking-wide | Label/Small | |
| Navigation / tabs | .gz-text-nav-lg | --text-16 | medium | --leading-100 | normal | Nav/Large |
.gz-text-nav-sm | --text-14 | medium | --leading-100 | normal | Nav/Small | |
| Badge / tag | .gz-text-badge-lg | --text-14 | bold | --leading-100 | --tracking-wide | Badge/Large |
.gz-text-badge-sm | --text-12 | bold | --leading-100 | --tracking-wide | Badge/Small | |
| Spec label | .gz-text-spec-label-lg | --text-14 | normal | --leading-150 | normal | Spec Label/Large |
.gz-text-spec-label-sm | --text-12 | normal | --leading-150 | normal | Spec Label/Small | |
| Spec value | .gz-text-spec-value-lg | --text-14 | medium | --leading-150 | normal | Spec Value/Large |
.gz-text-spec-value-sm | --text-12 | medium | --leading-150 | normal | Spec Value/Small |