Tekst leesbaar maken op foto’s zonder kader

Om tekst op foto’s leesbaar te maken zonder er een kader omheen te zetten begin je met plaatsing: zoek of maak het rustigste deel van het beeld en zet de woorden daar. Is dat niet genoeg, voeg dan een verloopscrim toe, een zacht uitlopen van helder naar donker langs één rand, verlaag daarna het eigen contrast van de foto met een tint en maak tot slot de letters zwaarder en groter. In die volgorde gebruikt houden ze de foto intact en de woorden helder. Een kader is een laatste redmiddel, geen startpunt.

Deze pagina gaat specifiek over de aanpak zonder kader. Voor alle technieken, inclusief kaders, banden en uitsnedes, zie tekst over afbeeldingen.

Waarom tekst verloren gaat op foto’s

Tekst heeft een verschil in helderheid nodig tussen de letters en wat erachter zit. Een foto verandert voortdurend van helderheid: een wit overhemd naast een donkere deuropening, bladeren tegen de lucht. Overal waar een letter van licht naar donker gaat, verdwijnt een deel ervan. Fijn detail maakt het erger, omdat het oog de rand van de letter niet kan scheiden van de textuur erachter.

Zes manieren om tekst op foto’s leesbaar te maken

1. Kies en snijd bij voor negatieve ruimte

De beste oplossing gebeurt voordat je een woord typt. Kies foto’s met een leeg vlak: lucht, een muur, een tafelblad, een wazige achtergrond. Snijd dan zo bij dat dat vlak zit waar de kop komt. Een staande post van 1080×1350 geeft je ruimte om het onderwerp omlaag te duwen en het bovenste derde rustig te laten. Fotografeer er zo mogelijk op: stap achteruit en laat ruimte boven het onderwerp. Letters op drukke achtergronden behandelt patronen en texturen die zich als drukke foto’s gedragen.

2. Voeg een verloopscrim toe

Een scrim is een verloop dat over de foto ligt, donker aan de rand waar de tekst staat en uitlopend tot volledig helder. Omdat het uitloopt, leest het oog het als wegvallend licht in plaats van als een vorm. Houd hem tot het derde van het beeld dat de woorden bevat, en gebruik een donkere tint uit de foto in plaats van puur zwart.

3. Tint de foto

Een foto in één of twee kleuren tinten verkleint het bereik van licht en donker, zodat tekst erop het overal makkelijker heeft. Een donker duotoon, zoals diepblauw naar zacht lila, werkt vooral goed achter witte letters; duotooneffect laat zien hoe je er een bouwt. Tinten laat ook een set niet-passende foto’s bij één merk lijken te horen.

4. Verduister of verlicht lokaal

De meeste fotoprogramma’s laten je de belichting of hooglichten in één gebied verlagen. Een felle lucht een stop omlaag halen, vlak achter de kop, is vaak op zich genoeg en onzichtbaar voor wie het origineel niet kent.

5. Maak de letters steviger

Dunne, kleine letters verdwijnen het eerst. Gebruik een halfvet of vet gewicht, ga een maat omhoog en geef kleine regels iets meer letterspatiëring. Een zwaar schreefloos lettertype op 110 px houdt stand over een foto waar een licht schreeflettertype op 70 px dat nooit zal doen. Vette lettertypen noemt betrouwbare letters.

6. Zet de foto naast de woorden

Soms is het eerlijke antwoord helemaal niet overlappen. Snijd de foto bij tot een cirkel, boog of de helft van het kader en zet de woorden op een effen of verloopondergrond ernaast. De foto blijft heel en de woorden krijgen perfect contrast.

Welke techniek bij welke foto past

Zo voeg je een verloopoverlay toe aan een afbeelding in CSS

Leg op een website de scrim en de foto in één background-declaratie. Het verloop komt eerst, zodat het bovenop ligt. Zo blijft het effect in CSS en past het zich aan elke uitsnede van de layout aan.

.hero {
  min-height: 70vh;
  display: grid;
  align-items: end;
  padding: 4rem;
  color: #fafaf9;
  background:
    linear-gradient(0deg, rgb(12 10 9 / 0.85) 0%, rgb(12 10 9 / 0.4) 35%, rgb(12 10 9 / 0) 65%),
    url("/images/terrace.jpg") center / cover no-repeat;
  background-color: #1c1917; /* fallback while the image loads */
}

Toets het resultaat aan de contrastrichtlijnen: ruwweg 4,5 op 1 voor gewone tekst en 3 op 1 voor grote koppen, zoals beschreven in de contrastgids van WebAIM. Test het lichtste punt achter de woorden, niet het gemiddelde. Kleurcontrast en toegankelijkheid legt de cijfers uit.

Fouten om te vermijden met tekst op foto’s

Halo’s en gloeden rond letters zijn de meest gebruikte reddingspoging en degene die er het goedkoopst uitziet. Ze vervagen de randen van de letters, het tegenovergestelde van wat lezen nodig heeft. Word je erdoor verleid, lees dan eerst tekstschaduwen en betere alternatieven.

In Gradiently kunnen foto’s in de kleuren van de Mark worden getint als mono, duotoon of wash, en bijgesneden tot bogen, cirkels en blobs om naast de woorden te staan. Bij ontwerpen waar de Mark doorschijnt verplaatst hij zijn rustigste vlak achter de tekst en kiest Auto-inkt lichte of donkere letters per regel, zonder kaders, schaduwen of vervaging.