Tekstschaduw: wanneer het helpt en de betere alternatieven

Een tekstschaduw helpt in twee situaties: als bewuste stijl, meestal een harde schaduw een paar pixels verschoven zonder vervaging, en als dunne veiligheidsrand op ondertitels over bewegende video. Als redmiddel voor woorden die niet lezen op een foto of kleurverloop doet het meestal pijn: zachte schaduwen en gloed vervagen precies de randen waaraan je oog letters herkent, en ze laten een ontwerp meteen gedateerd ogen. Verplaats voor leesbaarheid de woorden naar een rustiger gebied, voeg een verloopscrim toe, tint de achtergrond of kies een zwaarder gewicht.

Soorten tekstschaduweffecten

Wanneer een tekstschaduw helpt

Als harde, verschoven stijl

Een schaduw zonder vervaging, een paar procent van de lettershoogte verschoven en in een contrasterende kleur uit het palet, is een typografische stijl met een lange geschiedenis op posters, verpakkingen en bewegwijzering. Het leest als zelfverzekerd en een beetje nostalgisch. Behandel het als elk effect: één per ontwerp, een paar grote woorden, een zwaar lettertype. Teksteffecten vergelijkt het met de andere behandelingen. Retro-teksteffecten toont zijn nauwe verwanten, de dubbele en de sleep.

Achter ondertitels op video

Ondertitels staan over beeld dat elk frame verandert, dus je kunt geen rustig gebied kiezen. Een strakke, donkere schaduw of een dunne omlijning houdt witte ondertitels leesbaar als er een helder raam achter voorbij komt. Houd hem dicht bij de letters: een korte vervaging en weinig of geen verschuiving. Ontwerp van videoondertitels behandelt grootte en plaatsing.

Wanneer een tekstschaduw schaadt

Het probleem met een schaduw om contrast te herstellen is dat hij het symptoom behandelt. De achtergrond is nog steeds druk; je hebt alleen een veeg rond de letters toegevoegd. Zachte gloed is de ergste, omdat hij een vage wolk voorbij elke letter uitspreidt en de rand verzacht die de vorm bepaalt. Op socialposts comprimeren ze ook slecht en worden ze vlekkerige banden.

Betere alternatieven voor een tekstschaduw

1. 1

   Verplaats de woorden

   Zoek het rustigste, meest gelijkmatige deel van de achtergrond en zet de tekst daar. Dat lost de meeste problemen op voordat ze beginnen.

2. 2

   Voeg een verloopscrim toe

   Een zachte overgang van donker naar helder langs één rand geeft contrast zonder zichtbare vorm. Leesbare tekst op foto’s heeft scrimcodes.

3. 3

   Kalmeer de achtergrond

   Tint een foto in een of twee kleuren, verlaag de hoge lichten of kies een kleurverloop met een rustiger gebied.

4. 4

   Versterk de letters

   Ga een gewicht en een grootte omhoog. Een vette schreefloze letter in een royale grootte heeft op de meeste achtergronden geen hulp nodig.

5. 5

   Verander de inkt

   Soms wint donkere tekst op een licht gebied het van witte tekst met schaduw. Kies de inkt per regel in plaats van voor het hele ontwerp.

Vooral op kleurverlopen wordt de ondergrond vaak lichter of donkerder door het beeld, dus één inktkleur past niet bij elke regel. Tekst op een kleurverloop laat zien hoe je daarvoor plant, en letters op drukke achtergronden behandelt patronen en texturen.

Tekstschaduw in CSS

De CSS-eigenschap text-shadow neemt een horizontale verschuiving, een verticale verschuiving, een optionele vervagingsstraal en een kleur. Scheid meerdere schaduwen met komma’s; de eerste die je noemt, ligt bovenop. Gebruik em-eenheden zodat de schaduw met de lettergrootte meeschaalt. De volledige referentie staat op MDN.

/* Hard offset style: no blur, colour from the palette */
.headline-offset {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #9a3412;
}

/* Tight caption edge for text over video */
.caption {
  color: #ffffff;
  text-shadow: 0 0 0.12em rgb(0 0 0 / 0.9), 0 0.04em 0.08em rgb(0 0 0 / 0.8);
}

/* Preferred fix for readability: a scrim, not a shadow */
.hero {
  background:
    linear-gradient(0deg, rgb(15 23 42 / 0.8) 0%, rgb(15 23 42 / 0) 55%),
    url("/images/hero.jpg") center / cover;
}

Geautomatiseerde contrastcontroles vergelijken de tekstkleur met de achtergrondkleur en negeren de schaduw. Markeert een tool je tekst als laag contrast, dan kan een schaduw het op jouw scherm beter laten ogen maar verandert hij de meting niet. Los in plaats daarvan de achtergrond of de inkt op. CSS-tekstschaduw heeft meer recepten voor het web.

Hoe Gradiently omgaat met leesbaarheid

Gradiently is gebouwd op het idee dat woorden niet gered hoeven te worden. Een Mark weet waar de woorden staan: zijn rustigste, best contrasterende gebied schuift achter de tekst, kleuren bij de letters verdiepen of lichten op en drukke details komen tot rust. Auto-inkt kiest dan lichte of donkere letters per regel uit het eigen palet van de Mark. Er zijn geen vakken, schaduwen of vervaging mee gemoeid, en jij kiest hoe sterk de Mark reageert. Wil je diepte als stijl, dan geeft de letterbehandeling Extrusie diepe letters in de kleuren van de Mark en tekent Dubbel open letters twee keer, beide scherp en zonder vervaging.