# Effetti di testo retrò: lettering riso, double e trail

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

Non serve un pacchetto di filtri per far sembrare vintage un testo. Tre trattamenti, presi dalla stampa economica, dai manifesti sfalsati e dalle vecchie sigle, fanno quasi tutto il lavoro.

## The short version

- La maggior parte degli effetti di testo retrò nasce da tre trattamenti: il fuori registro riso, un eco sfalsato double e una scia di copie ripetute.
- Un effetto riso imita la stampa risograph, in cui due colori d’inchiostro si sovrappongono appena fuori allineamento e si mescolano dove si incontrano.
- Un effetto double mette una copia piena della parola dietro l’originale, spostata di poco in un colore a contrasto.
- Un effetto trail ripete la parola più volte dietro di sé, ogni copia più lontana, suggerendo velocità o una sigla anni 70.
- Gli effetti retrò rendono meglio su poche parole grandi in un carattere pesante, con colori presi dallo sfondo e un solo effetto per design.

Quasi ogni **effetto di testo retrò** che vedi è uno di tre trattamenti. Il **riso** imita la stampa economica a due colori, con gli inchiostri che si sovrappongono appena fuori allineamento. Il **double** mette dietro la parola una sua copia piena, spostata in un secondo colore, come una serigrafia con un livello fuori registro. Il **trail** ripete la parola più volte dietro di sé, a gradini, come il titolo di un film anni 70 o una parola in movimento. Ognuno funziona su poche parole grandi in un carattere pesante, con colori presi dal design, un effetto alla volta.

| Effetto | Assomiglia a | Sensazione | Adatto a |
| --- | --- | --- | --- |
| Riso | Due inchiostri, leggermente fuori registro, che si mescolano dove si sovrappongono | Fatto a mano, indie, fanzine | Librerie, caffè, concerti, studi creativi |
| Doppio | Un eco pieno e sfalsato dietro la parola | Deciso, pop, serigrafia | Saldi, streetwear, post di lancio |
| Scia | Più copie ripetute che si allontanano a gradini | Movimento, anni 70, psichedelico | Musica, eventi, campagne estive |

Tre trattamenti, tre voci diverse. Scegli in base a ciò che il messaggio deve far sentire, non a ciò che sembra più impressionante.

## L’effetto di testo riso

Una risograph è una stampante a matrice, e ogni colore d’inchiostro ha la sua matrice e il suo tamburo, quindi un design a due colori viene stampato in due livelli. I livelli raramente combaciano alla perfezione, e ne resta un filo di ciascun colore a sporgere e un terzo colore dove gli inchiostri si sovrappongono. I rosa fluorescenti, i blu vivi e i gialli solari degli inchiostri riso sono diventati uno stile a sé, amato da fanzine, editori indipendenti e illustratori.

- Rosa fluorescente: #ff48b0
- Blu medio: #0078bf
- Giallo: #ffe800
- Verde acqua: #00838a
- Rosso vivo: #f15060
- Carta non patinata: #f4efe6

Approssimazioni a schermo di inchiostri riso diffusi, su un tono carta bianco sporco. Scegli due inchiostri: rosa e blu, o giallo e verde acqua, sono abbinamenti classici.

Per farlo bene, tieni lo spostamento piccolo, qualche punto percentuale dell’altezza della lettera, e lascia che i colori si *moltiplichino* dove si sovrappongono invece di coprirsi. Se puoi, aggiungi un po’ di grana alle lettere: il vero inchiostro riso si deposita in modo leggermente irregolare sulla carta non patinata. Il rosa sul blu dà un viola intenso nella sovrapposizione, ed è il dettaglio che rende credibile l’effetto.

## L’effetto di testo double

Come tecnica, il double è il più semplice dei tre: una copia piena della parola, in un colore a contrasto, che sta dietro e leggermente spostata rispetto all’originale. Sembra una serigrafia o un adesivo, sicuro e grafico. A differenza di un’ombra portata, l’eco è nitido e colorato, non scuro e morbido. Spingi lo spostamento un po’ oltre ciò che sembra sicuro, intorno al 5-8 per cento dell’altezza della lettera; troppo vicino e sembra un errore.

- Fondo caldo, eco rosso scuro: `linear-gradient(135deg, #fde68a 0%, #fb923c 100%)`
- Fondo menta, eco blu notte: `linear-gradient(135deg, #a7f3d0 0%, #22d3ee 100%)`
- Fondo viola, eco rosa: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`

Fondi adatti a un effetto double. Il colore dell’eco deve contrastare sia con il fondo sia con la faccia della lettera.

## L’effetto di testo trail

Il trail ripete la parola da quattro a otto volte dietro di sé, ogni copia più lontana. Quando le copie cambiano colore andando, per esempio attraverso una calda palette da tramonto, ottieni l’inconfondibile look dei titoli anni 70. Quando sfumano in opacità, ottieni movimento, come se la parola fosse appena arrivata. Mantieni i passi regolari e la direzione coerente; una spaziatura casuale sembra rotta, non vintage.

Un post verticale con le parole Che figata in grande su uno sfondo sfumato caldo, con i dettagli di un evento sul tetto sotto

Un titolo breve e forte su un fondo caldo: la forma di cui hanno bisogno un trail o un double.

Una copertina verticale per una storia di una fiera dell’editoria indipendente, con un numero sopra il titolo e i dettagli sotto

Una storia per una fiera di fanzine, dove una finitura riso a due colori sul titolo starebbe benissimo.

## Effetti di testo retrò in CSS

Tutti e tre si possono costruire con `text-shadow`, più una modalità di fusione per il riso. Usa spostamenti in `em` così l’effetto scala con il corpo del carattere, e mantieni il testo come testo vero, selezionabile.

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

Per il riso, scrivi la parola due volte: `<h1 class="riso" data-text="Zine fair">Zine fair</h1>`. Multiply funziona su fondi chiari, come il vero inchiostro sulla carta. Alcuni lettori di schermo leggono il contenuto generato, quindi la parola potrebbe essere letta due volte.

> **Il riso vuole un fondo chiaro** Multiply scurisce, esattamente come fa l’inchiostro sulla carta, quindi sparisce sugli sfondi scuri. Per un design scuro usa invece l’effetto double.

## Come usare bene gli effetti di testo retrò

1. **Parti dal carattere giusto** Pesante e semplice, oppure un serif morbido anni 70. [I font retrò](https://gradiently.design/it/guide/retro-fonts) elenca i caratteri per decennio.
2. **Applicalo a due o cinque parole** Solo il titolo. I dettagli restano piatti e semplici.
3. **Prendi i colori dallo sfondo** L’eco, la scia o il secondo inchiostro devono venire dalla palette già presente nel design.
4. **Tieni lo spostamento intenzionale** Piccolo per il riso, un po’ più deciso per il double, a gradini regolari per il trail.
5. **Usa un solo effetto per design** Riso più trail più un contorno è un costume. Un effetto è una scelta.

### Evita

- Un trail su un titolo lungo
- Inchiostri riso su sfondo nero
- Un eco così vicino da sembrare un difetto di stampa
- Aloni mescolati agli spostamenti
- Un effetto diverso a ogni post

### Fai così

- Un trail su una o due parole brevi
- Riso su toni carta e colori chiari
- Uno spostamento chiaro e sicuro
- Solo copie nitide e piene
- Un effetto retrò come firma della campagna

Per l’insieme più ampio di trattamenti, inclusi contorni ed estrusioni, vedi [gli effetti di testo](https://gradiently.design/it/guide/text-effects), [il testo con contorno](https://gradiently.design/it/guide/outline-text) e [gli effetti di testo 3D](https://gradiently.design/it/guide/3d-text-effect). La grana rende il riso particolarmente credibile; [i gradienti granulosi](https://gradiently.design/it/guide/grainy-gradients) mostra come aggiungerla a uno sfondo.

## Riso, Doppio e Scia in Gradiently

I trattamenti di lettering di Gradiently includono Riso, Doppio e Scia, ciascuno disegnato nei colori del Mark, quindi non ci sono copie da impilare a mano. Le sue versioni sono più grafiche: Riso stampa il secondo inchiostro come una fine mezzatinta, appena fuori registro; Doppio disegna lettere aperte con un secondo contorno intorno; Scia manda contorni sfumati dietro parole piene. Il Mark mantiene leggibili le parole spostando la sua zona più calma dietro di loro, e la sua grana dà a un titolo retrò la superficie stampata che cerca.

## FAQ

### Cos’è un effetto di testo riso?

Imita la stampa risograph: due colori d’inchiostro stampati leggermente fuori allineamento, che si sovrappongono e si mescolano in un terzo colore dove si incontrano.

### Come faccio un effetto di testo retrò in CSS?

Impila copie piene con `text-shadow` senza sfocatura. Una copia fa un effetto double, più copie a gradini fanno un trail, e uno pseudo-elemento in multiply fa il riso.

### Quali colori vanno bene per un effetto di testo anni 70?

Gradini caldi da tramonto come oro, arancio, ruggine e marrone, su un fondo crema o marrone scuro.

### Che differenza c’è tra un effetto double e un’ombra portata?

Un double è una copia nitida e colorata spostata dietro la parola. Un’ombra portata di solito è scura e sfocata.