Typography

Role families

Kies eerst de family die past bij het content-type; binnen de family kies je daarna L/M/S afhankelijk van de positie in de hiërarchie.

1. Display

   Display is gereserveerd voor de grootste, meest emfatische tekst op een pagina — marketing heroes, splash-screens, brand-moments. Display is decoratief: het draagt emotie + schaal over, niet informatie-dichtheid.

   Use for

   Marketing landing-pages, product-launch heroes, splash-screens, billboard-style brand-moments.

   Don't use for

   Niet voor in-product page-headings — dat is Headline-territorium. Display voelt promotioneel; Headline voelt functioneel.

2. Headline

   Headline is de page-level titel-rol in een productive UI. Het opent een page of een primaire section met functionele autoriteit zonder de promotionele toon van Display.

   Use for

   Page-titels, primary section-openers, route-headers, dashboard-page-headings.

   Don't use for

   Niet voor card-/dialog-titels (Title past daar) of voor marketing-heroes (Display claimt die rol).

3. Title

   Title is de container-level titel-rol — de "naam" van een afgebakend blok binnen een page (card, dialog, modal, list-item).

   Use for

   Card-headers, dialog-headers, modal-titles, list-item-primary-text, accordion-headers, data-table column-titles.

   Don't use for

   Niet als page-h1 (Headline L) en niet als marketing-impact (Display).

4. Body

   Body is de lees-rol — paragraphs, supporting text, en al het content waar de lezer doorheen scant of leest. De default reading-typografie.

   Use for

   Paragraphs, supporting text onder titels, helper-text, descriptions, artikel-content, content-blocks in alle layouts.

   Don't use for

   Niet voor button-labels of form-labels — daarvoor is Label (font-weight 500). Niet als heading — gebruik Title / Headline.

5. Label

   Label is de UI-control-rol — alles wat een knop, veld, of klein UI-element identificeert. Font-weight 500 voor onderscheid tegen body-content.

   Use for

   Button-labels, form-field-labels, chip / tag content, segmented-control items, tab-bar labels, table-column-headers.

   Don't use for

   Niet als paragraph-tekst — de gewicht-stap (500 vs 400) maakt het ongeschikt voor reading-flow.

6. Code

   Code is een supplementaire rol met monospace font-family voor technische content. Eén size — voldoende voor zowel inline als block usage.

   Use for

   Inline-identifiers (function names, paths, env-vars) binnen body-paragraphs; block code-snippets; terminal-output; technical references.

   Don't use for

   Niet voor algemene tekst die "technisch lijkt" maar niet daadwerkelijk code is — monospace breekt de leesflow zonder grond.

7. Overline

   Overline is een supplementaire eyebrow-rol — uppercase + extra tracking. Eén size, gebruikt als categoriserende tag boven een Headline of Title.

   Use for

   Eyebrow-tekst boven section-headings (categorieën, dates, statuses), badge-style indicators, short labels in marketing-context.

   Don't use for

   Niet voor langere tekst (max 3-4 woorden); niet als click-target — uppercase + tracking schaadt de tap-readability.