In breve
- 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.
In questa pagina
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.
Sensazione
Adatto a
Sensazione
Adatto a
Sensazione
Adatto a
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.
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.
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 titolo breve e forte su un fondo caldo: la forma di cui hanno bisogno un trail o un double.
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.
/* 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;
}<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.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ò 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, il testo con contorno e gli effetti di testo 3D. La grana rende il riso particolarmente credibile; i gradienti granulosi 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.
Le domande più frequenti
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.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo