# Retro-Texteffekte: Riso, Doppel und Spur

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

Für Vintage-Schrift brauchst du kein Filterpaket. Drei Behandlungen, geborgt vom billigen Druck, von Offsetplakaten und alten Titelsequenzen, erledigen fast die ganze Arbeit.

## The short version

- Die meisten Retro-Texteffekte stammen aus drei Behandlungen: Riso-Passerfehler, ein versetztes Doppel-Echo und eine Spur wiederholter Kopien.
- Ein Riso-Effekt ahmt Risographie-Druck nach, bei dem sich zwei Farben leicht verschoben überlappen und sich dort mischen, wo sie sich treffen.
- Ein Doppel-Effekt setzt eine volle Kopie des Wortes hinter das Original, ein kleines Stück versetzt in einer kontrastierenden Farbe.
- Ein Spur-Effekt wiederholt das Wort mehrmals hinter sich, jede Kopie weiter weg, und deutet Tempo oder eine 70er Titelsequenz an.
- Retro-Effekte wirken am besten auf wenigen großen Wörtern in schwerer Schrift, mit Farben aus dem Hintergrund und nur einem Effekt pro Design.

Fast jeder **Retro-Texteffekt**, den du siehst, ist eine von drei Behandlungen. **Riso** ahmt billigen Zweifarbendruck nach, mit leicht verschoben überlappenden Farben. **Doppel** setzt eine volle Kopie des Wortes hinter sich, in einer zweiten Farbe versetzt, wie ein Siebdruck mit verrutschter Ebene. **Spur** wiederholt das Wort mehrmals hinter sich, Schritt für Schritt wegrückend, wie eine Titelkarte der 1970er oder ein Wort in Bewegung. Jede funktioniert bei wenigen großen Wörtern in schwerer Schrift, in Farben aus dem Design, ein Effekt nach dem anderen.

| Effekt | Sieht aus wie | Wirkt | Passt zu |
| --- | --- | --- | --- |
| Riso | Zwei Farben, leicht außer Register, die sich mischen, wo sie überlappen | Handgemacht, Indie, Zine | Buchhandlungen, Kaffee, Konzerte, Kreativstudios |
| Doppel | Ein festes Echo, hinter das Wort versetzt | Kräftig, poppig, Siebdruck | Rabatte, Streetwear, Launch-Posts |
| Spur | Mehrere wiederholte Kopien, die wegrücken | Bewegung, 70er, psychedelisch | Musik, Events, Sommerkampagnen |

Drei Behandlungen, drei verschiedene Stimmen. Wähle danach, wie sich die Botschaft anfühlen soll, nicht danach, was am beeindruckendsten aussieht.

## Der Riso-Texteffekt

Ein Risograph ist ein Schablonendrucker, und jede Farbe bekommt ihre eigene Schablone und Trommel, ein Zweifarbendesign wird also in zwei Ebenen gedruckt. Die Ebenen liegen selten perfekt deckungsgleich, was einen Streifen jeder Farbe hervorblitzen lässt und eine dritte Farbe dort, wo sich die Farben überlappen. Das fluoreszierende Pink, leuchtende Blau und sonnige Gelb der Riso-Farben ist zu einem eigenen Stil geworden, beliebt bei Zines, unabhängigen Verlagen und Illustratoren.

- Fluoreszierendes Pink: #ff48b0
- Mittelblau: #0078bf
- Gelb: #ffe800
- Petrol: #00838a
- Leuchtendes Rot: #f15060
- Ungestrichenes Papier: #f4efe6

Bildschirmannäherungen beliebter Riso-Farben auf einem gebrochenen Papierweiß. Wähle zwei Farben: Pink und Blau oder Gelb und Petrol sind klassische Paare.

Damit es gelingt, halte den Versatz klein, wenige Prozent der Buchstabenhöhe, und lass die Farben dort *multiplizieren*, wo sie überlappen, statt dass eine die andere verdeckt. Füge den Buchstaben etwas Korn hinzu, wenn du kannst: Echte Riso-Farbe sitzt leicht ungleichmäßig auf ungestrichenem Papier. Pink über Blau ergibt an der Überlappung ein tiefes Violett, das Detail, das den Effekt verkauft.

## Der Doppel-Texteffekt

Als Technik ist Doppel die einfachste der drei: eine volle Kopie des Wortes in kontrastierender Farbe, hinter dem Original und leicht versetzt. Er wirkt wie ein Siebdruck oder Sticker, selbstbewusst und grafisch. Anders als ein Schlagschatten ist das Echo scharf und bunt statt dunkel und weich. Schieb den Versatz ein Stück weiter, als es sich sicher anfühlt, etwa 5 bis 8 Prozent der Buchstabenhöhe; zu nah, und es sieht aus wie ein Fehler.

- Warmer Grund, tiefrotes Echo: `linear-gradient(135deg, #fde68a 0%, #fb923c 100%)`
- Minzgrund, marineblaues Echo: `linear-gradient(135deg, #a7f3d0 0%, #22d3ee 100%)`
- Violetter Grund, pinkes Echo: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`

Gründe, die zu einem Doppel-Effekt passen. Die Echofarbe sollte sowohl mit dem Grund als auch mit der Buchstabenfläche kontrastieren.

## Der Spur-Texteffekt

Spur wiederholt das Wort vier- bis achtmal hinter sich, jede Kopie weiter weg. Wechseln die Kopien unterwegs die Farbe, etwa durch eine warme Sonnenuntergangspalette, erhältst du den unverkennbaren 70er Titel-Look. Blenden sie in der Deckkraft aus, erhältst du Bewegung, als wäre das Wort gerade angekommen. Halte die Schritte gleichmäßig und die Richtung einheitlich; zufällige Abstände wirken kaputt statt vintage.

Ein Hochformat-Post mit den Wörtern „Far out“ groß über einem warmen Verlauf, mit Event-Details zur Dachterrasse darunter

Eine kurze, laute Headline auf warmem Grund: die Form, die eine Spur- oder Doppel-Behandlung braucht.

Ein vertikales Story-Cover für eine Kleinverlagsmesse, mit einer Ausgabenummer über dem Titel und Details darunter

Eine Zine-Messe-Story, in der ein zweifarbiges Riso-Finish auf dem Titel genau passen würde.

## Retro-Texteffekte in CSS

Alle drei lassen sich mit `text-shadow` bauen, plus einem Mischmodus für Riso. Nimm `em`-Versätze, damit der Effekt mit der Schriftgröße skaliert, und halte den Text als echten, markierbaren Text.

```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;
}
```

Schreibe für Riso das Wort zweimal: `<h1 class="riso" data-text="Zine fair">Zine fair</h1>`. Multiply funktioniert auf hellen Gründen, wie echte Farbe auf Papier. Manche Screenreader sagen erzeugten Inhalt an, das Wort wird also womöglich zweimal gelesen.

> **Riso braucht einen hellen Grund** Multiply dunkelt ab, genau wie Farbe auf Papier, und verschwindet deshalb auf dunklen Hintergründen. Nimm für ein dunkles Design stattdessen den Doppel-Effekt.

## So nutzt du Retro-Texteffekte gut

1. **Mit der richtigen Schrift beginnen** Schwer und schlicht oder eine weiche 70er Serife. [Retro-Schriften](https://gradiently.design/de/guide/retro-fonts) listet Schriften nach Jahrzehnt.
2. **Auf zwei bis fünf Wörter anwenden** Nur die Headline. Details bleiben flach und schlicht.
3. **Farben aus dem Hintergrund nehmen** Das Echo, der Spur oder die zweite Farbe sollte aus der Palette stammen, die schon im Design ist.
4. **Den Versatz bewusst halten** Klein bei Riso, etwas kräftiger bei Doppel, gleichmäßig gestuft bei Spur.
5. **Einen Effekt pro Design nutzen** Riso plus Spur plus eine Kontur ist ein Kostüm. Ein Effekt ist eine Entscheidung.

### Vermeiden

- Ein Spur auf einer langen Headline
- Riso-Farben auf schwarzem Hintergrund
- Ein Echo so nah, dass es wie ein Druckfehler aussieht
- Leuchten, mit den Versätzen vermischt
- Ein anderer Effekt in jedem Post

### Besser so

- Ein Spur auf einem oder zwei kurzen Wörtern
- Riso auf Papiertönen und hellen Farben
- Ein klarer, selbstbewusster Versatz
- Nur scharfe, feste Kopien
- Ein Retro-Effekt als Signatur einer Kampagne

Für die weitere Palette an Behandlungen, einschließlich Konturen und Extrusionen, siehe [Texteffekte](https://gradiently.design/de/guide/text-effects), [Konturschrift](https://gradiently.design/de/guide/outline-text) und [3D-Texteffekte](https://gradiently.design/de/guide/3d-text-effect). Korn macht Riso besonders überzeugend; [körnige Verläufe](https://gradiently.design/de/guide/grainy-gradients) zeigt, wie du es einem Hintergrund hinzufügst.

## Riso, Doppel und Spur in Gradiently

Zu den Lettering-Looks von Gradiently gehören Riso, Doppel und Spur, jeweils in den eigenen Farben des Marks gezeichnet, sodass du keine Kopien von Hand stapeln musst. Ihre Versionen sind eher grafisch: Riso druckt die zweite Farbe als feinen Raster, einen Hauch außer Register; Doppel zeichnet offene Buchstaben mit einer zweiten Kontur darum; Spur schickt ausblendende Konturen hinter volle Wörter. Der Mark hält die Wörter lesbar, indem er seine ruhigste Region hinter sie schiebt, und sein Korn gibt einer Retro-Headline die gedruckte Oberfläche, die sie will.

## FAQ

### Was ist ein Riso-Texteffekt?

Er ahmt Risographie-Druck nach: zwei Farben, leicht verschoben gedruckt, die sich überlappen und dort, wo sie sich treffen, zu einer dritten Farbe mischen.

### Wie mache ich einen Retro-Texteffekt in CSS?

Stapele feste `text-shadow`-Kopien ohne Unschärfe. Eine Kopie ergibt einen Doppel-Effekt, mehrere gestufte Kopien einen Spur, und ein multipliziertes Pseudoelement Riso.

### Welche Farben passen zu einem 70er Texteffekt?

Warme Sonnenuntergangsstufen wie Gold, Orange, Rost und Braun, auf einem cremefarbenen oder tiefbraunen Grund.

### Was ist der Unterschied zwischen einem Doppel-Effekt und einem Schlagschatten?

Ein Doppel ist eine scharfe, farbige Kopie, hinter das Wort versetzt. Ein Schlagschatten ist meist dunkel und verschwommen.