Typografisch systeem: kies een rol voor elk lettertype

Een typografisch systeem is de set regels die bepaalt hoe letters zich gedragen binnen een merk: een paar benoemde rollen (display, kop, lopende tekst, label), elk met één lettertype, gewicht, grootte, regelafstand en hoofdlettergebruik, allemaal afgeleid van één schaal en opgeslagen als tokens, zodat elke ontwerper en ontwikkelaar dezelfde waarden gebruikt. Lettertypen geven een merk zijn stem. Het systeem maakt die stem consistent, zodat een kop op een poster, een website en een story er allemaal uitzien alsof ze van dezelfde plek komen. Zo bouw je er een.

De rollen in een typografisch systeem

Begin bij taken, niet bij lettertypen. Elke tekst die een merk publiceert doet een van een handvol taken, en elke taak wordt een rol. De meeste merken hebben er vijf tot zeven nodig.

Hoeveel lettertypen een typografisch merksysteem nodig heeft

Meestal een of twee. Eén familie in drie gewichten kan een heel systeem dragen. Twee lettertypen, een voor koppen en een voor lopende tekst, voegen karakter toe. Een derde is alleen gerechtvaardigd voor een specifieke taak zoals code of data. De variatie komt uit rollen, groottes en gewichten, niet uit meer lettertypen. Google Fonts-combinaties en merklettertypen helpen je kiezen.

Bouw een lettergrootteschaal

Een lettergrootteschaal kiest een basisgrootte en vermenigvuldigt die voor elke stap omhoog met dezelfde verhouding. De stappen hangen samen, dus elke twee groottes in het systeem ogen samen bewust gekozen. Een verhouding van 1,25 past bij interfaces en dichte pagina’s; 1,333 of 1,5 geeft meer drama voor redactioneel en marketingwerk. Lettergrootteschaal legt de verhoudingen dieper uit.

Sla het systeem op als tokens

Een systeem dat alleen in een pdf leeft, drijft af. Tokens zijn benoemde waarden die zowel code als ontwerpbestanden lezen, zodat het veranderen van één waarde alles bijwerkt. Noem tokens naar rol, nooit naar grootte: --type-heading overleeft een herontwerp, --type-31 niet. Designtokens behandelt het bredere idee.

:root {
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  --type-display: 600 clamp(3.0625rem, 6vw, 3.8125rem) / 1.05 var(--font-heading);
  --type-heading: 600 1.9375rem / 1.15 var(--font-heading);
  --type-subheading: 500 1.25rem / 1.4 var(--font-body);
  --type-body: 400 1rem / 1.5 var(--font-body);
  --type-label: 600 0.8125rem / 1.2 var(--font-body);
}

h1 { font: var(--type-display); }
h2 { font: var(--type-heading); }
p { font: var(--type-body); }
.eyebrow { font: var(--type-label); text-transform: uppercase; letter-spacing: 0.08em; }
.price { font-variant-numeric: tabular-nums; }

Eén rol, per kanaal andere groottes

Een kop op een website en een kop op een Instagrampost doen dezelfde taak op heel verschillende groottes, want de een wordt op armlengte op een groot scherm gelezen en de ander krimpt in een telefoonfeed. Houd de rollen identiek en geef elk kanaal zijn eigen groottes.

Zo bouw je je typografische systeem

1. 1

   Verzamel wat je al publiceert

   Maak screenshots van je website, posts, e-mails en dia’s. Omcirkel elke afzonderlijke tekststijl. De meeste merken vinden er veel meer dan ze bedoeld hadden.

2. 2

   Groepeer stijlen in rollen

   Voeg bijna-duplicaten samen. Mik op vijf tot zeven rollen die alles dekken wat je omcirkelde.

3. 3

   Kies lettertypen voor de rollen

   Meestal een koplettertype en een broodlettertype. Controleer of de licentie web, apps en eventueel logogebruik dekt.

4. 4

   Stel de schaal en de details in

   Kies een basis en verhouding en leg dan per rol gewicht, regelafstand, hoofdlettergebruik en spatiëring vast. Besluit je kophoofdlettergebruik één keer; zinshoofdletters versus titelhoofdletters helpt.

5. 5

   Publiceer het als tokens en een blad van één pagina

   Tokens voor code en ontwerpbestanden, een enkel visueel blad in je merkstijlgids voor alle anderen.

Voor dagelijkse socialemediaposts en presentaties bewaart een Gradiently-merkkit (met Pro) de kop- en broodlettertypen van je systeem, inclusief geüploade lettertypebestanden, naast je logo’s, kleuren en stem. Nieuwe ontwerpen beginnen met die twee lettertypen, en de Designer past de kit toe als hij een ontwerp opmaakt, zodat de verdeling tussen kop en lopende tekst standhoudt zonder dat iemand eraan hoeft te denken.