Tekst op een drukke achtergrond, leesbaar zonder kader

Tekst op een drukke achtergrond leesbaar maken komt neer op twee dingen: wat er direct achter de letters ligt, en welke kleur de letters hebben. De gangbare oplossingen, een kader, een schaduw of een vervaging, veranderen wat er achter de letters ligt door het te bedekken. De betere oplossingen zetten de woorden waar de achtergrond al rustig is, kiezen de inkt per regel, en laten, waar de tool het toelaat, de achtergrond ruimte maken in plaats van hem op te lappen.

Waarom drukke achtergronden en tekst botsen

Lezen hangt af van het contrast tussen elke letter en wat eromheen ligt. Op een egale kleur is dat contrast overal hetzelfde. Op een foto, een patroon of een levendig kleurverloop verandert het voortdurend: de ene letter staat op een hooglicht, de volgende op een schaduw, en het woord valt in stukken uiteen. Detail maakt het erger, omdat de randen en vormen van de achtergrond zelf een beetje op letterstreken lijken, en het oog de twee moet scheiden.

Daarom zijn contrastrichtlijnen, zoals de verhoudingen in kleurcontrast, moeilijk toe te passen op drukke achtergronden: er is niet één achtergrondkleur om tegen te meten. De eerlijke test is de slechtste plek, het lichtste vlak achter lichte tekst of het donkerste achter donkere tekst.

De gebruikelijke oplossingen, en wat elk ervan kost

Elke standaardoplossing werkt door te veranderen wat er direct achter de letters ligt. Ze zijn allemaal legitiem, en allemaal nemen ze iets weg van de achtergrond die je hebt gekozen.

Gebruik je er toch een, doe het dan zacht. Een scrim die over een groot vlak vervaagt valt minder op dan een kader, en een zachte, brede schaduw oogt minder gedateerd dan een harde. Dit is een ingetogen versie voor het web:

.hero {
  position: relative;
}

/* A soft scrim: dark at the bottom, where the text sits, gone by the middle. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.2) 35%, rgb(0 0 0 / 0) 60%);
  pointer-events: none;
}

.hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  /* A wide, faint shadow reads as depth, not as an outline. */
  text-shadow: 0 1px 24px rgb(0 0 0 / 0.35);
}

Beter: zet de woorden waar de achtergrond rustig is

De meeste drukke achtergronden hebben een rustiger gebied: een stuk lucht, een zachte poel van kleur, een onscherp deel. De tekst daarheen verplaatsen, of bijsnijden zodat dat gebied valt waar de tekst komt, lost het probleem op zonder iets te bedekken. Als je een achtergrond kiest of maakt, zoek er dan een met een rustig vlak waar je woorden meestal staan.

Hetzelfde idee geldt voor foto’s, waar bijsnijden, vervaging en duotoon allemaal rust kunnen scheppen; tekst op een afbeelding loopt zeven technieken door. Bij kleurverlopen is de rustige zone meestal waar de kleur het langzaamst verandert; tekst op een kleurverloop laat zien hoe je die vindt.

Kies de inkt per regel

Een achtergrond die van licht naar donker loopt, is niet geholpen met één inktkleur. Witte tekst leest op de donkere helft en verdwijnt op de lichte helft. In plaats van er een paneel achter te forceren kies je de inkt per regel: lichte inkt waar de achtergrond achter die regel donker is, donkere inkt waar hij licht is. Haal beide inkten uit het eigen palet van de achtergrond, een diepe toon en een bleke, zodat ze bij het ontwerp horen en er niet opgeplakt uitzien.

Laat de achtergrond bewegen, niet de woorden

De stilste oplossing van allemaal is een achtergrond die weet waar de woorden staan. Zo gedraagt een Mark van Gradiently zich: in plaats van bedekt te worden, herschikt hij zichzelf. Het hele materiaal schuift zodat het rustigste gebied met het beste contrast achter de tekst ligt; dicht bij de letters worden kleuren dieper onder lichte tekst en lichter onder donkere tekst; drukke ribbels ontspannen. Niets daarvan is een vorm die je kunt aanwijzen. Het leest als het ontwerp, omdat het het ontwerp is.

De andere helft is inkt. Zet tekst op Auto-inkt en elke regel kiest de lichte of donkere inkt die het best leest tegen wat er echt achter ligt, uit een paar dat uit het eigen palet van de Mark komt. Verplaats een kop van een licht vlak naar een donker vlak en hij slaat stilletjes om. Jij bepaalt hoe sterk de achtergrond reageert: nauwelijks merkbaar, in balans, of een duidelijk podium voor een kop die moet aankomen.

De beste oplossing voor leesbaarheid is degene die niemand opmerkt.

Een checklist voor tekst op drukke achtergronden

1. 1

   Zoek eerst het rustige vlak

   Plaats of snijd bij zodat de woorden op het gelijkmatigste deel van de achtergrond staan.

2. 2

   Controleer de slechtste plek

   Test het contrast op het lichtste punt achter lichte tekst of het donkerste achter donkere tekst, niet het gemiddelde.

3. 3

   Kies inkt per regel

   Licht op donker, donker op licht, beide uit het palet van de achtergrond.

4. 4

   Gebruik gewicht en grootte

   Zwaardere, grotere letters overleven drukkere achtergronden. Haarlijndunne gewichten niet. Lettertypen voor social media noemt letters die standhouden.

5. 5

   Lap alleen op als laatste redmiddel

   Als het moet, gebruik dan de zachtste oplossing: liever een zachte scrim dan een kader, liever een brede, vage schaduw dan een harde.