# Hoofdletters in tekst: wanneer het helpt en wanneer het schaadt

[Canonical HTML page](https://gradiently.design/nl/guide/all-caps-typography)

Hoofdletters geven een label gezag en een kop gewicht, en maken van een alinea een muur. Hier verdienen ze hun plek, zie je hoeveel spatiëring ze nodig hebben en hoe je ze op het web goed zet.

## The short version

- Tekst in hoofdletters werkt het best voor korte labels, eyebrows, knoppen en koppen van enkele woorden.
- Hoofdletters hebben dezelfde hoogte, dus woorden in hoofdletters verliezen de gevarieerde omtrek waarmee mensen ze snel herkennen.
- Hoofdletters hebben extra letterspatiëring nodig: ongeveer 0,08em tot 0,12em voor kleine labels en 0,01em tot 0,03em voor grote koppen.
- Typ op het web tekst in gewone letters en pas hoofdletters toe met de css-eigenschap text-transform, zodat kopiëren, vertalen en schermlezers de natuurlijke woorden krijgen.
- Lange passages, lopende tekst en alles wat al luid is, blijven in zinsvorm met gewone hoofdletters.

**Tekst in hoofdletters** helpt als hij kort is: een eyebrow boven een kop, een label, een knop, een datum of een kop van twee of drie woorden. Het schaadt als het lang wordt. Hoofdletters hebben allemaal dezelfde hoogte, dus een woord in hoofdletters wordt een vlak rechthoekje in plaats van een herkenbare vorm, en een zin ervan leest trager en komt over als schreeuwen. Kort gebruikt en met wat extra letterspatiëring geven hoofdletters orde en gezag; voor alles gebruikt vlakken ze de hiërarchie uit.

## Waarom hoofdletters moeilijker te lezen zijn

Kleine letters hebben stokken omhoog (b, d, h, k) en staarten omlaag (g, p, y). Samen geven ze elk woord een eigen omtrek, en geoefende lezers gebruiken die omtrek om bekende woorden te herkennen zonder ze te spellen. In hoofdletters zit elke letter tussen dezelfde twee lijnen. De omtrek wordt een doos en de lezer moet beter naar elke letter kijken. Bij twee of drie woorden is dat prima. Bij een alinea vermoeit het.

Een staande post waarin kop, datum en details allemaal in hoofdletters staan en om aandacht strijden

Alles in hoofdletters: niets valt op, want alles schreeuwt.

Dezelfde post met alleen de datum in kleine hoofdletters en de kop en details in gewone zinsvorm

Hoofdletters bewaard voor de kleine eyebrow. De kop en details lezen sneller in gewone zinsvorm.

## Wanneer hoofdletters werken

- **Eyebrows en kickers**: een kleine categorie of datum boven de kop, zoals *NIEUW BINNEN* of *AFLEVERING 12*. Hoofdletters vertellen de lezer dat het een label is, geen inhoud.
- **Navigatie en knoppen**: korte, scanbare woorden waarbij elk item hetzelfde soort ding is.
- **Korte koppen van een tot drie woorden**: *UITVERKOOP*, *NU OPEN*, *UITVERKOCHT*. De vorm van het blok wordt deel van het ontwerp.
- **Woordmerken en logo’s**: veel sterke logo’s staan in hoofdletters, waar het woord als vast beeld wordt gezien in plaats van gelezen.
- **Datalabels en tabelkoppen**: korte koppen in hoofdletters boven kolommen houden ze gescheiden van de waarden eronder.

## Wanneer hoofdletters schaden

### Niet in hoofdletters

- Lopende tekst en alinea’s
- Koppen van meer dan ongeveer vier woorden
- Elke kop op een pagina tegelijk
- Schrijf- en sierlettertypes
- Boodschappen die rustig of vriendelijk moeten voelen
- Juridische tekst en voorwaarden

### Goed in hoofdletters

- Eyebrows en labels
- Knoppen en navigatie
- Koppen van een tot drie woorden
- Stevige schreefloze en slab-lettertypes
- Uitverkoop, openingen en dringende borden
- Tabel- en grafiekkoppen

Schrijflettertypes verdienen een extra waarschuwing: hun hoofdletters zijn ontworpen om woorden te beginnen, niet om naast elkaar te staan, en een woord in schrijfhoofdletters is vaak bijna onleesbaar. Ook de toon telt. Hoofdletters lezen als luid, wat bij een uitverkoop past en een verontschuldiging ondermijnt. Kies je breder tussen hoofdlettergebruik voor koppen, dan behandelt [zinsvorm versus titelvorm](https://gradiently.design/nl/guide/title-case-vs-sentence-case) de rustigere opties.

## Hoeveel letterspatiëring hoofdletters nodig hebben

Lettertypes zijn gespatieerd voor kleine letters. Hoofdletters naast elkaar, met hun rechte zijkanten en brede vormen, zien er op standaardspatiëring krap uit. Door de tracking te openen krijgt elke letter ruimte en is het woord makkelijker te scannen. Hoe kleiner de tekst, hoe meer ruimte hij nodig heeft. [Letterspatiëring](https://gradiently.design/nl/guide/letter-spacing) legt tracking in het algemeen uit; gebruik voor hoofdletters deze beginwaarden.

| Gebruik | Grootte | Letterspatiëring |
| --- | --- | --- |
| Klein label of eyebrow | 11 tot 13 px op een scherm, 28 tot 32 px op een post van 1080 px | 0,08em tot 0,12em |
| Knop of navigatie | 14 tot 16 px | 0,04em tot 0,08em |
| Subkop in hoofdletters | 18 tot 24 px | 0,04em tot 0,06em |
| Grote kop in hoofdletters | 48 px en groter | 0,01em tot 0,03em |
| Enorm displaywoord | 120 px en groter | 0 tot 0,02em, controleer paren op het oog |

Beginwaarden in em, zodat de spatiëring met de grootte meeschaalt. Pas op het oog aan voor jouw lettertype.

Grote hoofdletters hebben ook soms handmatige onderschneiding nodig bij lastige paren zoals AV, LT en TY, waar de standaardruimte te groot oogt. [Tracking versus kerning](https://gradiently.design/nl/guide/tracking-vs-kerning) legt het verschil tussen beide aanpassingen uit.

## text-transform uppercase gebruiken in css

Schrijf de woorden in je html in gewone letters en pas hoofdletters toe met css. Kopiëren, zoekresultaten en vertaaltools krijgen dan natuurlijke tekst, en je vermijdt het risico dat een schermlezer een in hoofdletters getypt woord als afkorting behandelt en het spelt. Zo kun je later ook van gedachten veranderen zonder iets opnieuw te typen.

```css
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 600;
  /* Raise hyphens, brackets and colons to suit capitals, if the font has it */
  font-feature-settings: "case" 1;
}

/* Small capitals: lowercase letters drawn as smaller capitals */
.label {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}
```

De eigenschap `case` tilt leestekens op zodat ze gecentreerd tegen hoofdletters staan. `all-small-caps` is een rustiger alternatief voor volledige hoofdletters.

Stel ook het `lang`-attribuut van de pagina in. `text-transform` volgt taalregels, wat telt bij woorden als de Turkse i met punt, en de [MDN-referentie](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) beschrijft hoe elke taal wordt behandeld. Vertaalde labels zijn vaak langer dan Engelse, en hoofdletters maken ze nog breder, dus laat ruimte in knoppen en tabbladen.

## Hoofdletters op socialposts

Op een telefoon houden hoofdletters op kleine formaten het soms beter vol dan kleine letters, omdat hun vormen eenvoudiger zijn. Dat maakt hoofdletters een goede keuze voor de kleine details op een post: een datum, een handle, een paginanummer op een carrousel. Gebruik hoofdletters voor de kop alleen als hij heel kort is; anders leest gewone zinsvorm sneller in het moment dat iemand een post aandacht geeft. Een stevig [kopfont](https://gradiently.design/nl/guide/headline-fonts) helpt in beide gevallen. [Tekstopmaak voor socialposts](https://gradiently.design/nl/guide/text-hierarchy-social) laat zien hoe de niveaus in elkaar passen.

Een verticale story met NU OPEN in grote hoofdletters, een kleine eyebrow in hoofdletters en een detailregel in gewone zinsvorm

Twee woorden die in hoofdletters werken, met de langere details eronder in gewone zinsvorm.

In Gradiently schrijft de Designer koppen en details voor je en zet ze op in jouw Mark, en elk woord blijft daarna bewerkbaar in de Studio. Auto-inkt houdt kleine labels in hoofdletters even leesbaar als de kop door voor elke regel lichte of donkere tekst uit het palet van de Mark te kiezen.

## FAQ

### Is tekst in hoofdletters moeilijker te lezen?

Bij meer dan een paar woorden wel. Hoofdletters hebben één hoogte, dus woorden verliezen hun herkenbare omtrek en kosten meer tijd om te lezen.

### Hoeveel letterspatiëring moeten hoofdletters hebben?

Ongeveer 0,08em tot 0,12em voor kleine labels, 0,04em tot 0,06em voor subkoppen en 0,01em tot 0,03em voor grote koppen.

### Moet ik in hoofdletters typen of text-transform uppercase gebruiken?

Gebruik `text-transform: uppercase` op tekst in gewone letters. Kopiëren, vertalen en schermlezers krijgen dan de natuurlijke woorden.

### Lijken koppen in hoofdletters op schreeuwen?

Lange wel. Een tot drie woorden in hoofdletters lezen als zelfverzekerd; een hele zin leest als schreeuwen.