De ultieme designer hack om tekst op afbeeldingen vorm te geven

Hoe kun je leesbare tekst op een drukke afbeelding leesbaar houden? Dit is een veelvoorkomend probleem dat ontwerpers vaak tegenkomen. Er zijn verschillende manieren om dit op te lossen: 

• Je kunt de tekst een kleur geven die uitspringt van de achtergond. Dit is vaak lastig, omdat afbeeldingen vaak veel kleuren bevatten, en je niet altijd zo een kleur in je kleurenpalet hebt zitten. Ook zijn dit vaak geen fraaie kleuren. 
• Je kunt de tekst op een plek in de afbeelding zetten die een vlakke achtergrond heeft. Vaak is dit niet aanwezig. Als je tekst op een vaste plek op veel afbeeldingen plaatst, dan is dit onmogelijk om voor te bepalen.
• Je kunt de afbeeldingen uitkiezen die minder contrast bevatten, of de contrast uit afbeeldingen halen. Dit is vaak ook geen optie, omdat er specifieke beelden zijn uitgekozen met de klant.

Is het dan onmogelijk om leesbare tekst op afbeeldingen te tonen? Zeker niet, integendeel - bij Sigma Solutions gebruiken we vaak een simpele designer hack die jij ook kan toepassen.

De hack

De volgende stijlregels moet je toepassen op de tekst:

• De tekst mag niet te klein zijn
• De tekst mag niet in een te smalle lettertype-variant staan
• De tekst moet wit zijn
• De tekst moet groot genoeg zijn, maar niet té groot
• Als laatste moet je een zwarte schaduw plaatsen om de tekst

Dat ziet er dan ongeveer zo uit:

Valt het je op dat de tekst goed leesbaar is, zelfs met deze drukke achtergrond?

Waarom werkt dit zo goed?

Om te begrijpen waarom deze hack zo goed werkt moeten we begrijpen waarom tekst slecht leesbaar is als we deze op foto’s plaatsen. Als mensen lezen we woorden als patronen. We lezen niet individuele letters, maar we zien woorden als pictogrammen. Om deze pictogrammen te kunnen ‘lezen’ moeten we ze kunnen herkennen. Als deze pictogrammen door contrasterende elementen worden verstoord, dan kunnen we ze slecht lezen.

Maar als we de contrasterende elementen die direct aansluiten op de letters wegnemen, door een schaduw te plaatsen, dan wordt het veel makkelijker om deze te herkennen! Je kunt hiervoor ook een donkere, contrasterende rand gebruiken in plaats van een schaduw. Maar in mijn ervaring werkt een schaduw beter. Dat is prettiger voor het oog. Daarnaast valt het veel mensen niet eens op dat je een schaduw gebruikt - de tekst is ‘gewoon’ leesbaar zonder dat de schoonheid van de vorm van de letters wordt weggenomen.

Je kunt experimenteren met de hoeveelheid schaduw die je toepast. sommige lettertypen of foto’s zullen meer of minder schaduw vereisen om leesbaar te worden.

Discussie

Deze hack is niet altijd wenselijk om te gebruiken. Als je tekst op foto’s plaatst, dan moet je rekening houden met het feit dat de tekst minder goed leesbaar wordt en dat de compositie van de foto wordt verstoord. Maar soms kan het juist wel een mooie manier zijn om content in te delen. Als je tekst op een foto plaatst, dan geef je aan dat deze tekst een nauwe relatie met de foto heeft.. 

In sommige ontwerpen kan deze hack ook ‘lelijk’ zijn; het past dan niet bij de vormgeving van de rest van de site of applicatie. Dan is het beter een andere oplossing te gebruiken. Je kunt bijvoorbeeld een vlak achter de tekst plaatsen of de tekst helemaal uit de afbeelding halen.

Hopelijk heb ik je een nieuwe, handige theorie kunnen leren die je kunt gebruiken om je ontwerpen in de toekomst nog verder te verbeteren. 

Ben jij benieuwd hoe Sigma Solutions jou kan helpen om deze geavanceerde vormgevingsprincipes toe te passen voor jouw redesign? Lees dan meer over onze diensten op het gebied van design.