# Letter-effecten: Contour, Binnenlijn, Extrusie en meer

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

Een effect maakt van een regel tekst een stuk lettering, getekend in de eigen kleuren van je Mark. Hier zijn alle acht, met de klussen waar elk goed in is en de effecten die je beter laat liggen.

## The short version

- Gradiently heeft acht letter-effecten: Contour, Binnenlijn, Gesneden, Extrusie, Dubbel, Spoor, Riso en Halo.
- Elk effect is getekend in de kleuren van de Mark van het ontwerp, dus de lettering hoort altijd bij de achtergrond.
- Letter-effecten werken het best op korte displaywoorden zoals een titel, een naam of één woord, niet op lopende tekst.
- Contour, Gesneden en Extrusie brengen hun eigen contrast mee en passen bij felle posters; Binnenlijn, Dubbel en Riso passen bij redactionele en drukwerklooks.
- Gebruik één effect per ontwerp, op de regel die het meest telt, en laat ondersteunende tekst gewoon.

Gradiently heeft acht **letter-effecten**: Contour, Binnenlijn, Gesneden, Extrusie, Dubbel, Spoor, Riso en Halo. Elk maakt van een regel tekst lettering getekend in de eigen kleuren van je Mark: hoogtelijnen rond de woorden, een lijn uitgesneden in elke letter, woorden uitgesneden uit een plaat, diepe driedimensionale letters en meer. Ze zijn bedoeld voor displaywoorden, een titel of een naam, en werken het best één voor één, op de regel die mensen het eerst moeten zien.

## Alle acht letter-effecten in één oogopslag

| Effect | Wat het tekent | Voelt als | Het best voor |
| --- | --- | --- | --- |
| **Contour** | Hoogtelijnen die als rimpels rond de woorden uitwaaieren | Kaarten, topografie, geluid | Festivalposters, albumhoezen, outdoormerken |
| **Binnenlijn** | Een lijn uitgesneden in elke letter, zodat de Mark als tweede kleur doorschemert | Gevelreclame, vintage drukwerk | Titels in winkelgevelstijl, menukaarten, etiketten |
| **Gesneden** | Woorden uitgesneden uit een massieve plaat | Stencil, papierknipwerk | Stevige covers, actieposts, uitspraken in één woord |
| **Extrusie** | Diepe letters met zijkanten in de kleuren van de Mark | Massief, beeldhouwend, retro | Eventtitels, lanceringen, YouTube-thumbnails |
| **Dubbel** | Open letters twee keer getekend, iets uit elkaar | Echo, beweging, mode | Redactionele covers, muziek, nachtleven |
| **Spoor** | Contouren die achter de letters aan slepen, met een instelbare sporenkleur | Snelheid, beweging, de jaren zeventig | Sport, aftellingen, energieke stories |
| **Riso** | Twee inkten iets uit register, met een korrelige stipplestructuur | Risografische zines, onafhankelijk drukwerk | Posters, zines, bakkerijen, boekwinkels |
| **Halo** | Een zacht licht in de kleur van de Mark rond de letters | Neon, schemer, dromerig | Alleen als decoratie, nooit als leesbaarheidsoplossing |

De acht effecten. Elk wordt getekend uit het palet van de Mark, dus als je de Mark wisselt, kleurt de lettering mee.

## Contour, Gesneden en Extrusie: lettering met eigen contrast

Deze drie bouwen een sterke rand in de letters, en daarom houden ze stand op levendige Marks. **Contour** omringt de woorden met lijnen als op een reliëfkaart, zodat de lettering uit de achtergrond lijkt te rijzen. **Gesneden** zet de woorden als vormen uitgesneden uit een massieve plaat, wat zelfverzekerd en grafisch leest. **Extrusie** geeft elke letter diepte, getekend in de kleuren van de Mark, de klassieke look voor een lanceringstitel of een thumbnail.

Een staande poster met het ene woord Zonnewende heel groot op een warme Mark met kleurverloop

Eén woord, heel groot: de schaal waarvoor Contour en Extrusie gemaakt zijn.

Hetzelfde Zonnewende-ontwerp als eventposter, met een grote titel en gewone ondersteunende details eronder

De titel met effect bovenaan, met gewone details eronder. Alleen de titel krijgt het effect.

Wil je weten hoe uitgetrokken en omlijnde letters in het algemeen werken, dan leggen [3D-teksteffecten](https://gradiently.design/nl/guide/3d-text-effect) en [omlijnde tekst](https://gradiently.design/nl/guide/outline-text) het vakmanschap erachter uit.

## Binnenlijn, Dubbel en Riso: de drukwerk- en redactiefamilie

**Binnenlijn** snijdt één lijn in elke letter, en omdat de lijn de Mark zelf laat zien, wordt de achtergrond de tweede kleur van de lettering. Het past het best bij zware, brede lettertypen, waar binnen de streep ruimte is. **Dubbel** tekent open letters twee keer, iets verschoven, voor een echo die voelt als mode- of muziekdrukwerk. **Riso** bootst een risograaf na: twee inkten die niet helemaal op elkaar vallen en een korrelige stippelstructuur, perfect voor alles wat met de hand gedrukt moet voelen.

> **Laat het effect bij het lettertype passen** Binnenlijn en Gesneden hebben dikke strepen nodig, dus combineer ze met een zwaar displaylettertype. Dubbel en Spoor staan het best op open, eenvoudige letters. Riso vergeeft bijna elk lettertype, waardoor het een veilige eerste proef is.

## Spoor en Halo: beweging en sfeer

**Spoor** herhaalt de contour van een woord erachter, als letters die een kielzog achterlaten. Je kunt de kleur van het spoor instellen en het leest als snelheid: goed voor sport, aftellingen en alles wat zelfs in een stilstaand beeld in beweging moet lijken. **Halo** omringt de letters met een zacht licht in de kleur van de Mark. Het is puur decoratief, een sfeer in plaats van een hulpmiddel, en nooit een manier om slecht leesbare tekst te redden. Leest een regel moeilijk, verhoog dan het reactieniveau van de Mark of laat [Auto-inkt](https://gradiently.design/nl/guide/auto-ink-legibility) de andere inkt kiezen.

## Een letter-effect kiezen voor de klus

| Je maakt | Probeer eerst | Probeer daarna |
| --- | --- | --- |
| Een optreden- of festivalposter | Contour | Riso |
| Een post voor een productlancering | Extrusie | Gesneden |
| Een menutitel voor een café of bakkerij | Binnenlijn | Riso |
| Een YouTube-thumbnail | Extrusie | Gesneden |
| Een cover in tijdschriftstijl of de opener van een carrousel | Dubbel | Binnenlijn |
| Een aftelling of sportstory | Spoor | Extrusie |
| Een zine- of boekwinkelposter | Riso | Dubbel |

Beginpunten, geen regels. Probeer er twee, bekijk beide op het formaat waarop mensen ze echt zien en houd degene die het eerst leest.

### Vermijd

- Een effect op lopende tekst of kleine details
- Twee verschillende effecten in één ontwerp
- Lange koppen van acht woorden of meer
- Halo gebruiken om een zwakke regel leesbaar te maken

### Doe

- Eén effect op een of twee displaywoorden
- Gewone, ruim gezette ondersteunende tekst
- Zware lettertypen voor Binnenlijn en Gesneden
- Controleer het op de telefoon, op het echte formaat

## Een letter-effect toevoegen in de Studio

1. **Selecteer de tekst** Kies de kop of het woord dat je wilt bewerken. Laat al het andere gewone letters.
2. **Kies een effect** Kies een van de acht letter-effecten. Het wordt meteen getekend in de kleuren van de Mark van het ontwerp.
3. **Pas de letters aan** Ga zwaarder of breder als het effect druk oogt, en voeg een beetje letterspatiëring toe voor Dubbel en Spoor.
4. **Probeer een andere Mark** Wissel de Mark en zie de lettering meekleuren. Dit is de snelste manier om een effect te beoordelen.
5. **Controleer elk formaat** Pas het formaat aan naar een story of thumbnail en kijk of het bewerkte woord op die schaal nog leest.

## Letter-effecten in CSS, voor het web

Heb je een vergelijkbare look nodig op een website, dan laten twee hiervan zich netjes naar CSS vertalen: een omlijning in de geest van Dubbel en een getrapte extrusie. Beide gebruiken echte tekst, dus ze blijven selecteerbaar en toegankelijk.

```css
/* Open outline letters, in the spirit of Double */
.outline {
  color: transparent;
  -webkit-text-stroke: 2px #f4b26a;
  text-shadow: 6px 6px 0 #7a2e5c;
}

/* A stepped extrusion in two tones */
.extrude {
  color: #fbe7d4;
  text-shadow:
    1px 1px 0 #c2577a,
    2px 2px 0 #c2577a,
    3px 3px 0 #a3456a,
    4px 4px 0 #a3456a,
    5px 5px 0 #7a2e5c,
    6px 6px 0 #7a2e5c;
}
```

Harde schaduwen zonder vervaging bouwen diepte op in plaats van een gloed. `-webkit-text-stroke` wordt in alle huidige browsers ondersteund; zie [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke).

Voor de bredere familie aan effecten, ook die zich slecht naar het web laten vertalen, zie je [teksteffecten](https://gradiently.design/nl/guide/text-effects). En twijfel je of je lettering wel nodig hebt, dan is [lettering versus typografie](https://gradiently.design/nl/guide/lettering-vs-typography) een nuttige lees.

## FAQ

### Welke letter-effecten heeft Gradiently?

Acht: Contour, Binnenlijn, Gesneden, Extrusie, Dubbel, Spoor, Riso en Halo, elk getekend in de kleuren van de Mark van het ontwerp.

### Kan ik letter-effecten op lopende tekst gebruiken?

Dat kun je beter niet doen. De effecten zijn gemaakt voor korte displaywoorden; gewone letters houden langere tekst makkelijk leesbaar.

### Welk letter-effect is het best voor een poster?

Contour, Extrusie en Riso zijn sterke posterkeuzes. Contour en Extrusie brengen hun eigen contrast mee en Riso geeft een gedrukte uitstraling.

### Veranderen letter-effecten van kleur met de Mark?

Ja. Elk effect wordt getekend uit het palet van de Mark, dus als je de Mark wisselt, kleurt de lettering mee.

### Moet ik Halo gebruiken om tekst beter leesbaar te maken?

Nee. Halo is decoratief. Verhoog voor leesbaarheid het reactieniveau van de Mark of laat Auto-inkt de andere inkt kiezen.