# Teksteffecten die niet gedateerd ogen: contour, extrusie, echo

[Canonical HTML page](https://gradiently.design/nl/guide/text-effects)

De meeste teksteffecten ogen gedateerd omdat ze op alles worden toegepast, op volle kracht en zonder reden. Op één woord, in het juiste gewicht en de juiste kleur, horen ze bij de meest expressieve middelen in typografie.

## The short version

- Teksteffecten zijn bewerkingen van letters, zoals contouren, binnenlijnen, extrusie, verschoven echo’s, drukverschuiving en gloed.
- Effecten werken het best op een paar grote woorden in een zwaar gewicht, waar ze karakter toevoegen zonder de tekst moeilijker leesbaar te maken.
- Effecten ogen gedateerd als ze op volle kracht op elke regel staan, op elkaar gestapeld worden of zwakke typografie moeten redden.
- Tekst met contour heeft een dikke, eenvoudige letter en een rustige achtergrond nodig, omdat de letters hun volle vorm verliezen.
- Kies één effect per ontwerp en haal de kleuren ervan uit het palet van de achtergrond, zodat het ontworpen oogt in plaats van toegevoegd.

**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](https://gradiently.design/nl/guide/display-fonts), 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.

| Effect | Hoe het eruitziet | Toon die het zet | Risico voor leesbaarheid |
| --- | --- | --- | --- |
| Contour (outline) | Letters alleen als lijnen getekend | Luchtig, modern, redactioneel | Hoog op drukke ondergronden |
| Binnenlijn | Een dunne lijn in elke haal | Oude reclameborden, ambacht, sport | Laag op grote formaten |
| Extrusie | Letters met 3D-diepte | Retro, speels, luid | Gemiddeld |
| Dubbel of echo | Een verschoven kopie of spoor erachter | Beweging, muziek, energie | Gemiddeld |
| Gesneden | Letters doorgesneden en verschoven | Spanning, mode, tech | Gemiddeld |
| Riso | Verschoven kleurlagen, drukstructuur | Onafhankelijk drukwerk, zines, warmte | Laag bij een kleine verschuiving |
| Halo of gloed | Zacht licht rond de letters | Nacht, neon, rustige luxe | Laag op donkere ondergronden |

Zeven families van lettereffecten. Hoe hoger het risico, hoe meer zorg het effect nodig heeft.

## 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.

Een staand ontwerp met één groot woord op een levendig kleurverloop, het soort layout dat bij een lettereffect past

Eén groot woord is waar een effect zijn plek verdient: er valt weinig te lezen en veel te voelen.

Een staande evenementposter met een bewerkte titel en gewone details op een donker kleurverloop

Op een evenementposter hoort het effect alleen op de titel. Data en details blijven gewoon.

### Vermijd

- Een effect op de kop én op de lopende tekst
- Contour plus schaduw plus gloed op één woord
- Standaardkleuren, zoals een zwarte slagschaduw op alles
- Dunne of lichte letters onder zware effecten
- Effecten om zwakke tekst spannend te laten lijken

### Doe

- Eén effect, op de paar grootste woorden
- Eén bewerking per ontwerp, met overtuiging gebruikt
- Effectkleuren uit het palet van de achtergrond
- Zware, eenvoudige lettervormen die het effect overleven
- Tekst die zonder effect werkt, en dan een effect dat toon toevoegt

## 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.

```css
/* 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);
}
```

Vier effecten in gewone CSS. `-webkit-text-stroke` werkt ondanks het voorvoegsel in alle grote browsers. Schaduwen in `em` schalen mee met de tekst.

> **Toegankelijkheid** Effecten die met CSS zijn gebouwd, laten de woorden echte tekst blijven, zodat schermlezers, zoekmachines en vertaaltools ze nog lezen. Bij effecten die in afbeeldingen zijn ingebakken, moeten de woorden in de alt-tekst worden herhaald.

## 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.

- Ondergrond: nachtviolet: #1a1033
- Echo: violet: #7c3aed
- Gloed: roze licht: #f472b6
- Letter: warm wit: #fde8d0

Effectkleuren uit één kleurverloop: een donkere ondergrond, een verzadigde echo, een gloed en een warme letterkleur.

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](https://gradiently.design/nl/guide/color-contrast-accessibility).

## 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.

Een vierkant ontwerp met een korte zin groot op een rustig kleurverloop, met veel lege ruimte

Eén bewerkte zin op een rustig vlak laat zien hoe terughoudendheid het werk doet.

Meer over tekst die leesbaar blijft op kleurrijke ondergronden lees je in [tekst op een kleurverloop](https://gradiently.design/nl/guide/text-on-gradient); voor effecten die in het kleurverloop zelf zitten, zie [gradienttekst in CSS](https://gradiently.design/nl/guide/css-gradient-text).

## FAQ

### Welke teksteffecten ogen modern?

Terughoudende: een dikke contour naast een vol woord, een kleine verschoven echo, een subtiele riso-verschuiving of een zachte gloed op een donkere ondergrond, elk op een of twee grote woorden.

### Hoe maak ik tekst met contour in CSS?

Zet de tekstkleur op transparent en voeg `-webkit-text-stroke` toe met een dikte en kleur, zoals `-webkit-text-stroke: 0.03em #ffffff`. Het werkt in alle grote browsers.

### Hoe maak ik een 3D-teksteffect?

Stapel meerdere lagen `text-shadow`, elk één pixel verder in dezelfde richting verschoven en naar achteren donkerder. Haal de kleuren uit je achtergrond, zodat de diepte door hetzelfde licht belicht lijkt.

### Maken teksteffecten tekst minder leesbaar?

Dat kan. Houd effecten bij grote, zware woorden, één effect per ontwerp, en controleer of de letter zelf nog sterk contrasteert met de achtergrond.