Basis van typografie: grootte, gewicht, spatiëring en ritme

De basis van typografie komt neer op zes beslissingen: de grootte van elk stuk tekst, het gewicht, de regelhoogte, de letterspatiëring, de uitlijning en de regellengte. Zit dat goed, dan oogt bijna elk fatsoenlijk lettertype professioneel; zit het fout, dan oogt het beste lettertype ter wereld amateuristisch. Elk heeft een verstandige standaard, hieronder gegeven, waar je bewust van kunt afwijken.

Grootte: gebruik een typeschaal

Groottes één voor één kiezen leidt tot een pagina vol bijna gelijke groottes, zonder duidelijke volgorde. Een typeschaal lost dat op: begin bij een basisgrootte en vermenigvuldig voor elke stap omhoog met dezelfde verhouding. De verhouding bepaalt het karakter. Kleine verhoudingen, zoals 1,2, voelen rustig en compact; grote, zoals 1,5, voelen dramatisch en redactioneel.

:root {
  --step--1: 0.8rem;     /* 12.8px */
  --step-0: 1rem;        /* 16px   */
  --step-1: 1.25rem;     /* 20px   */
  --step-2: 1.5625rem;   /* 25px   */
  --step-3: 1.953rem;    /* 31.25px */
  --step-4: 2.441rem;    /* 39px   */
  --step-5: 3.052rem;    /* 48.8px */
}

body { font-size: var(--step-0); }
h3   { font-size: var(--step-2); }
h2   { font-size: var(--step-3); }
h1   { font-size: var(--step-5); }

Op social posts is het canvas groter, dus de getallen zijn groter, maar het idee is hetzelfde. Op een post van 1080 pixels breed houdt een kop van ongeveer 90 tot 120 pixels en een detailregel van ongeveer 40 tot 56 een duidelijke stap ertussen en leest het op een telefoon.

Gewicht: minder gewichten, duidelijkere stappen

Gewicht is de dikte van de streken, meestal genummerd van 100 (thin) tot 900 (black), met 400 als regular en 700 als bold. Twee of drie gewichten zijn genoeg voor de meeste ontwerpen. Waar het om gaat is dat naburige gewichten er verschillend uitzien: regular tegenover bold leest als een bewust contrast, regular tegenover medium leest vaak als een fout.

Regelhoogte: ruimte tussen regels

Regelhoogte, of interlinie, is de afstand van de ene regel tot de volgende. Lopende tekst heeft lucht nodig om prettig te lezen: ongeveer 1,4 tot 1,6 keer de lettergrootte is een betrouwbaar bereik. Grote koppen hebben minder nodig, rond 1,0 tot 1,2, omdat de tussenruimtes op grote formaten veel breder lijken dan ze zijn. Lange regels hebben iets meer regelhoogte nodig dan korte, zodat het oog het begin van de volgende regel kan vinden. Regelhoogte en regellengte gaat er dieper op in.

Letterspatiëring: meestal met rust laten

Lettertypen zijn door hun ontwerpers gespatieerd voor de groottes waarvoor ze bedoeld zijn, dus lopende tekst hoeft zelden te worden aangepast. Twee uitzonderingen zijn het kennen waard. Grote koppen zien er vaak beter uit als ze iets krapper staan, met een kleine negatieve waarde zoals -0.01em tot -0.02em. Tekst in kapitalen en kleine labels hebben het omgekeerde nodig: een beetje extra ruimte, rond 0.05em tot 0.1em, omdat kapitalen zijn ontworpen om naast kleine letters te staan. Letterspatiëring behandelt de details.

Uitlijning

Links uitgelijnde tekst, met een vrije rechterregelval, is niet voor niets de standaard: elke regel begint op dezelfde plek, dus het oog vindt hem makkelijk. Gecentreerde tekst past bij korte stukken, zoals een kop, een citaat of een uitnodiging, en wordt vermoeiend na een paar regels. Uitgevulde tekst oogt netjes in drukwerk, waar de software goed kan afbreken, maar op het web ontstaan er vaak ongelijke gaten tussen woorden.

Regellengte: de zetbreedte

De lengte van een regel, de zetbreedte, doet er net zo veel toe als de grootte. Te lange regels maken het moeilijk de volgende te vinden; te korte regels breken het leesritme met voortdurende terugsprongen. Een bereik van ongeveer 45 tot 75 tekens per regel wordt het vaakst aanbevolen voor lopende tekst. Op het web maakt de eenheid ch dit makkelijk.

article p {
  max-width: 65ch;   /* about 65 characters per line */
  line-height: 1.55;
}

h1 {
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance; /* evens out headline lines where supported */
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--step--1);
}

Ritme: ruimte die groepeert

Ruimte vertelt lezers wat bij elkaar hoort. Een kop moet dichter bij de alinea staan die hij inleidt dan bij de alinea ervoor, dus zet meer ruimte boven koppen dan eronder. Houd de alinea-afstand consistent en gebruik overal één eenheid voor afstand, vaak gebaseerd op de regelhoogte van de lopende tekst. Als ruimte consistent wordt gebruikt, krijgt de pagina een ritme waardoor ze rustig aanvoelt, ook als ze vol is. Visuele hiërarchie bouwt hierop voort.

1. 1

   Kies een grootte voor lopende tekst

   16 pixels of groter op schermen; veel groter op social posts.

2. 2

   Kies een schaalverhouding

   1,2 voor rustig en compact, 1,25 voor de meeste dingen, 1,333 of meer voor redactioneel drama.

3. 3

   Stel twee gewichten in

   Regular om te lezen, bold of semibold voor nadruk en koppen.

4. 4

   Stel regelhoogtes in

   Ongeveer 1,5 voor lopende tekst, ongeveer 1,1 voor grote koppen.

5. 5

   Beperk de zetbreedte

   Rond 65 tekens voor lopende tekst.

6. 6

   Werk met één eenheid voor ruimte

   Eén afstandsstap, hergebruikt, met meer ruimte boven koppen dan eronder.

Staat dit, dan wordt de keuze van het lettertype het leuke deel in plaats van de reparatie. Begin met lettertypen combineren en schreef of schreefloos.