Teksteffecten die niet gedateerd ogen: contour, extrusie, echo

Teksteffecten zijn bewerkingen van letters, zoals een contour, een binnenlijn, een 3D-extrusie, een verschoven echo, een drukverschuiving of een zachte gloed. Ze ogen niet gedateerd als drie regels gelden: gebruik één effect per ontwerp, zet het op een paar grote woorden in een zwaar gewicht, en haal de kleuren uit de achtergrond in plaats van uit een voorinstelling. Effecten mislukken als ze gestapeld worden, over elke regel verspreid staan of typografie moeten redden die niet werkte.

Deze gids behandelt de belangrijkste families van effecten, wanneer elk bij een boodschap past, hoe je ze leesbaar houdt en hoe je er een paar in CSS bouwt. Heb je nog geen lettertype gekozen, begin dan met display-lettertypen, want de meeste effecten hebben grote, stevige letters nodig om te werken.

De belangrijkste soorten teksteffecten

De meeste letterbewerkingen horen bij een handvol families. Elk heeft zijn eigen associaties, en daarom kies je met een effect eigenlijk een toon.

Wanneer een teksteffect helpt, en wanneer het schaadt

Een effect helpt als het betekenis draagt die de woorden alleen niet kunnen dragen. Een echo achter Luid laat het trillen. Een extrusie op een retro menubord plaatst het in de tijd. Een gloed op een poster voor een nachtelijk evenement roept de zaal op. Zegt het effect niets, dan wordt het versiering, en versiering veroudert snel.

Zo maak je tekst met contour leesbaar

Tekst met contour is het effect dat het vaakst mislukt, omdat het de volle vorm weghaalt waardoor letters makkelijk te herkennen zijn. Gebruik het op een zware schreefloze of slab met open vormen, op grote formaten, boven een rustige achtergrond. Maak de lijn dik genoeg om als lijn te lezen en niet als haarlijn: ongeveer 2 tot 4 procent van de lettergrootte is een goed begin.

Een betrouwbaar patroon combineert één vol woord met één woord in contour, zoals Zomer vol en Sessies in contour. Het volle woord verankert het lezen; de contour voegt ritme toe. Zet nooit contour op kleine tekst, en controleer het op een telefoon, waar dunne lijnen als eerste verdwijnen.

/* Outline: a stroke, no fill. */
.outline {
  color: transparent;
  -webkit-text-stroke: 0.03em #f5f0ff;
}

/* Extrude: stacked shadows, each 1px further. */
.extrude {
  color: #fde8d0;
  text-shadow:
    1px 1px 0 #d9485f,
    2px 2px 0 #d9485f,
    3px 3px 0 #b83250,
    4px 4px 0 #b83250,
    5px 5px 0 #8f2442,
    6px 6px 0 #8f2442;
}

/* Echo: one offset copy in a palette colour. */
.echo {
  color: #ffffff;
  text-shadow: 0.06em 0.06em 0 #7c3aed;
}

/* Halo: a soft glow for dark grounds. */
.halo {
  color: #fff7ed;
  text-shadow: 0 0 0.25em rgb(251 146 60 / 0.55),
               0 0 0.8em rgb(244 114 182 / 0.35);
}

Kleuren kiezen voor teksteffecten

Effecten ogen toegevoegd als hun kleuren uit het niets komen. Ze ogen ontworpen als ze uit de achtergrond komen. Haal de zijkleur van de extrusie uit het donkerste deel van het kleurverloop, de echo uit de meest verzadigde kleur en de gloed uit de lichtste. Dan leest het effect als licht en materiaal uit dezelfde scène.

Houd de letter zelf in hoog contrast met de ondergrond, en laat het effect qua lichtheid tussen die twee in zitten. Zo voegt het effect diepte toe zonder contrast van de letters af te nemen. Voor de onderliggende regels over contrast, zie kleurcontrast.

Teksteffecten in Gradiently

De Studio van Gradiently heeft acht bewerkingen onder Belettering: Contour, Binnenlijn, Gesneden, Extrusie, Dubbel, Spoor, Riso en Halo. Een Mark weet ook waar de woorden staan: het rustigste deel schuift erachter, en Auto-inkt kiest per regel lichte of donkere tekst uit het eigen palet van de Mark, wat een bewerkt woord een stevige ondergrond geeft. Dezelfde regels gelden nog steeds: één bewerking, een paar woorden, een zware letter.

Meer over tekst die leesbaar blijft op kleurrijke ondergronden lees je in tekst op een kleurverloop; voor effecten die in het kleurverloop zelf zitten, zie gradienttekst in CSS.