Hoofdletters in tekst: wanneer het helpt en wanneer het schaadt

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.

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

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 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 legt tracking in het algemeen uit; gebruik voor hoofdletters deze beginwaarden.

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 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.

.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;
}

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 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 helpt in beide gevallen. Tekstopmaak voor socialposts laat zien hoe de niveaus in elkaar passen.

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.