# Retro teksteffecten: riso-, double- en trail-letters

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

Je hebt geen filterpakket nodig om letters vintage te laten voelen. Drie bewerkingen, geleend van goedkoop drukwerk, offsetposters en oude titelsequenties, doen bijna al het werk.

## The short version

- De meeste retro teksteffecten komen van drie bewerkingen: riso-misregistratie, een dubbele verschoven echo en een spoor van herhaalde kopieën.
- Een riso-effect bootst risograaf-drukwerk na, waarbij twee inktkleuren een beetje uit de lijn over elkaar vallen en mengen waar ze samenkomen.
- Een double-effect zet één effen kopie van het woord achter het origineel, een korte afstand verschoven in een contrasterende kleur.
- Een trail-effect herhaalt het woord meerdere keren achter zichzelf, elke kopie verder weg, wat snelheid of een titelsequentie uit de jaren 70 suggereert.
- Retro-effecten werken het best op een paar grote woorden in een zwaar lettertype, met kleuren uit de achtergrond en maar één effect per ontwerp.

Bijna elk **retro teksteffect** dat je ziet is een van drie bewerkingen. **Riso** bootst goedkoop tweekleurendrukwerk na, met inkten die een beetje uit de lijn overlappen. **Double** zet een effen kopie van het woord achter zichzelf, verschoven in een tweede kleur, als een zeefdruk met een verschoven laag. **Trail** herhaalt het woord meerdere keren achter zichzelf, steeds verder weg, als een titelkaart uit de jaren 70 of een woord in beweging. Elk werkt op een paar grote woorden in een zwaar lettertype, in kleuren uit het ontwerp, steeds één effect tegelijk.

| Effect | Ziet eruit als | Voelt | Past bij |
| --- | --- | --- | --- |
| Riso | Twee inkten, een beetje uit het register, die mengen waar ze overlappen | Handgemaakt, indie, zine | Boekwinkels, koffie, concerten, creatieve studio’s |
| Double | Een effen echo verschoven achter het woord | Gedurfd, poppy, zeefdruk | Uitverkoop, streetwear, lanceerposts |
| Trail | Meerdere herhaalde kopieën die steeds verder weg staan | Beweging, jaren 70, psychedelisch | Muziek, events, zomercampagnes |

Drie bewerkingen, drie verschillende stemmen. Kies op basis van hoe de boodschap moet voelen, niet op wat het indrukwekkendst oogt.

## Het riso-teksteffect

Een risograaf is een stencildrukker, en elke inktkleur krijgt een eigen stencil en trommel, dus een ontwerp met twee kleuren wordt als twee lagen gedrukt. De lagen vallen zelden perfect samen, waardoor een streepje van elke kleur te zien is en een derde kleur ontstaat waar de inkten overlappen. De fluorescerende roze, heldere blauwe en zonnige gele tinten van riso-inkten zijn een eigen stijl geworden, populair bij zines, onafhankelijke uitgevers en illustratoren.

- Fluorescerend roze: #ff48b0
- Middenblauw: #0078bf
- Geel: #ffe800
- Turkoois: #00838a
- Helderrood: #f15060
- Ongecoat papier: #f4efe6

Schermbenaderingen van populaire riso-inkten, op een gebroken wit papiertint. Kies twee inkten: roze en blauw, of geel en turkoois, zijn klassieke combinaties.

Om het goed te krijgen houd je de verschuiving klein, een paar procent van de letterhoogte, en laat je de kleuren *vermenigvuldigen* waar ze overlappen in plaats van dat de ene de andere bedekt. Voeg als het kan een beetje korrel aan de letters toe: echte riso-inkt ligt een beetje ongelijk op ongecoat papier. Roze over blauw geeft een diep violet op de overlap, en dat detail verkoopt het effect.

## Het double-teksteffect

Als techniek is double de eenvoudigste van de drie: één effen kopie van het woord, in een contrasterende kleur, die achter het origineel zit en er een beetje van verschoven is. Het leest als een zeefdruk of een sticker, zelfverzekerd en grafisch. Anders dan een slagschaduw is de echo scherp en kleurrijk in plaats van donker en zacht. Duw de verschuiving iets verder dan veilig voelt, zo’n 5 tot 8 procent van de letterhoogte; te dichtbij lijkt het een foutje.

- Warme ondergrond, dieprode echo: `linear-gradient(135deg, #fde68a 0%, #fb923c 100%)`
- Muntondergrond, marineblauwe echo: `linear-gradient(135deg, #a7f3d0 0%, #22d3ee 100%)`
- Violette ondergrond, roze echo: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`

Ondergronden die bij een double-effect passen. De echokleur moet contrasteren met zowel de ondergrond als het letterbeeld.

## Het trail-teksteffect

Trail herhaalt het woord vier tot acht keer achter zichzelf, elke kopie een stap verder weg. Als de kopieën onderweg van kleur veranderen, bijvoorbeeld door een warm zonsondergangspalet, krijg je de onmiskenbare titellook van de jaren 70. Als ze in dekking vervagen, krijg je beweging, alsof het woord net is aangekomen. Houd de stappen gelijk en de richting consistent; willekeurige afstanden lijken kapot in plaats van vintage.

Een staande post met de woorden Far out groot gezet over een warm verloop, met details van een dakterrasevent eronder

Een korte, luide kop op een warme ondergrond: de vorm die een trail- of double-bewerking nodig heeft.

Een verticale storycover voor een kleine-persbeurs, met een nummer boven de titel en details eronder

Een story voor een zinebeurs, waar een tweekleuren riso-afwerking op de titel perfect past.

## Retro teksteffecten in CSS

Alle drie kun je bouwen met `text-shadow`, plus een mengmodus voor riso. Gebruik `em`-verschuivingen zodat het effect meeschaalt met de lettergrootte en houd de tekst echte, selecteerbare tekst.

```css
/* Double: one crisp echo */
.double {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #b91c1c;
}

/* Trail: repeated copies through a warm palette */
.trail {
  color: #fff7ed;
  text-shadow:
    0.04em 0.04em 0 #fbbf24,
    0.08em 0.08em 0 #f97316,
    0.12em 0.12em 0 #ea580c,
    0.16em 0.16em 0 #c2410c,
    0.20em 0.20em 0 #7c2d12;
}

/* Riso: two inks multiplied, slightly out of register */
.riso {
  position: relative;
  color: #0078bf;
  mix-blend-mode: multiply;
}
.riso::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #ff48b0;
  transform: translate(0.04em, -0.03em);
  mix-blend-mode: multiply;
}
```

Schrijf het woord voor riso twee keer: `<h1 class="riso" data-text="Zine fair">Zine fair</h1>`. Multiply werkt op lichte ondergronden, net als echte inkt op papier. Sommige schermlezers lezen gegenereerde inhoud voor, dus het woord kan twee keer worden voorgelezen.

> **Riso heeft een lichte ondergrond nodig** Multiply maakt donkerder, precies zoals inkt op papier, dus het verdwijnt op donkere achtergronden. Gebruik voor een donker ontwerp in plaats daarvan het double-effect.

## Zo gebruik je retro teksteffecten goed

1. **Begin met het juiste lettertype** Zwaar en eenvoudig, of een zachte schreefletter uit de jaren 70. [Retro fonts](https://gradiently.design/nl/guide/retro-fonts) somt lettertypen op per decennium.
2. **Pas het toe op twee tot vijf woorden** Alleen de kop. Details blijven vlak en gewoon.
3. **Neem kleuren uit de achtergrond** De echo, het spoor of de tweede inkt moet uit het palet komen dat al in het ontwerp zit.
4. **Houd de verschuiving bewust** Klein voor riso, iets gedurfder voor double, gelijkmatig getrapt voor trail.
5. **Gebruik één effect per ontwerp** Riso plus trail plus een contour is een kostuum. Eén effect is een keuze.

### Vermijden

- Een trail op een lange kop
- Riso-inkten op een zwarte achtergrond
- Een echo zo dichtbij dat het op een drukfout lijkt
- Gloed gemengd met de verschuivingen
- Op elke post een ander effect

### Doen

- Een trail op een of twee korte woorden
- Riso op papiertinten en lichte kleuren
- Een duidelijke, zelfverzekerde verschuiving
- Alleen scherpe, effen kopieën
- Eén retro-effect als campagnehandtekening

Voor de bredere set bewerkingen, inclusief contouren en extrusies, zie [teksteffecten](https://gradiently.design/nl/guide/text-effects), [contourtekst](https://gradiently.design/nl/guide/outline-text) en [3D-teksteffecten](https://gradiently.design/nl/guide/3d-text-effect). Korrel maakt riso extra overtuigend; [korrelige verlopen](https://gradiently.design/nl/guide/grainy-gradients) laat zien hoe je die aan een achtergrond toevoegt.

## Riso, Dubbel en Spoor in Gradiently

Gradiently’s letterbewerkingen bevatten Riso, Dubbel en Spoor, elk getekend in de eigen kleuren van de Mark, dus er zijn geen kopieën om met de hand te stapelen. De versies zijn grafisch van aard: Riso drukt de tweede inkt als fijne halftoon, een tikje uit het register; Dubbel tekent open letters met een tweede contour eromheen; Spoor stuurt vervagende contouren achter effen woorden. De Mark houdt de woorden leesbaar door zijn rustigste zone erachter te zetten, en zijn korrel geeft een retro kop het gedrukte oppervlak dat hij wil.

## FAQ

### Wat is een riso-teksteffect?

Het bootst risograaf-drukwerk na: twee inktkleuren die een beetje uit de lijn zijn gedrukt, overlappen en mengen tot een derde kleur waar ze samenkomen.

### Hoe maak ik een retro teksteffect in CSS?

Stapel effen `text-shadow`-kopieën zonder vervaging. Eén kopie maakt een double-effect, meerdere getrapte kopieën maken een trail en een vermenigvuldigd pseudo-element maakt riso.

### Welke kleuren passen bij een teksteffect uit de jaren 70?

Warme zonsondergangstappen zoals goud, oranje, roest en bruin, op een crème of diepbruine ondergrond.

### Wat is het verschil tussen een double-effect en een slagschaduw?

Een double is een scherpe, gekleurde kopie die achter het woord is verschoven. Een slagschaduw is meestal donker en vervaagd.