In breve
- Gli effetti di testo sono trattamenti applicati alle lettere, come contorni, linee interne, estrusioni, eco sfalsate, fuori registro da stampa e bagliori.
- Gli effetti funzionano meglio su poche parole grandi, in un peso marcato, dove aggiungono carattere senza rendere il testo più difficile da leggere.
- Gli effetti sembrano datati quando sono applicati alla massima intensità su ogni riga, sovrapposti tra loro o usati per salvare una tipografia debole.
- Il testo con contorno ha bisogno di un carattere spesso e semplice e di uno sfondo calmo, perché le lettere perdono la loro forma piena.
- Scegli un solo effetto per design e lega i suoi colori alla palette dello sfondo, così sembra progettato e non aggiunto.
In questa pagina
Gli effetti di testo sono trattamenti applicati alle lettere, come un contorno, una linea interna, un’estrusione 3D, un’eco sfalsata, un fuori registro da stampa o un bagliore morbido. Non sembrano datati se valgono tre regole: un solo effetto per design, applicato a poche parole grandi in un peso marcato, con i colori presi dallo sfondo e non da un preset. Gli effetti falliscono quando vengono sovrapposti, sparsi su ogni riga o usati per salvare una tipografia che non funzionava.
Questa guida copre le principali famiglie di effetti, quando ciascuna si adatta a un messaggio, come mantenerle leggibili e come costruirne alcune in CSS. Se non hai ancora scelto il carattere, parti dai font display, perché la maggior parte degli effetti ha bisogno di lettere grandi e robuste per funzionare.
I principali tipi di effetti di testo
La maggior parte dei trattamenti del lettering appartiene a poche famiglie. Ognuna porta con sé le proprie associazioni, per questo sceglierne una significa in realtà scegliere un tono di voce.
| Effetto | Come appare | Tono che dà | Rischio di leggibilità |
|---|---|---|---|
| Contorno | Lettere disegnate solo con il tratto | Arioso, moderno, editoriale | Alto su sfondi carichi |
| Inline | Una linea sottile dentro ogni tratto | Insegne d’epoca, artigianato, sport | Basso a grandi dimensioni |
| Estrusione | Lettere con profondità 3D | Retrò, giocoso, rumoroso | Moderato |
| Doppio o eco | Una copia sfalsata o una scia dietro | Movimento, musica, energia | Moderato |
| Ritaglio | Lettere tagliate e spostate | Tensione, moda, tecnologia | Moderato |
| Riso | Livelli di colore sfalsati, texture da stampa | Stampa indipendente, fanzine, calore | Basso se lo sfalsamento è piccolo |
| Alone o bagliore | Luce morbida intorno alle lettere | Notte, neon, lusso calmo | Basso su sfondi scuri |
Quando un effetto di testo aiuta e quando danneggia
Un effetto aiuta quando porta un significato che le parole da sole non possono portare. Un’eco dietro Forte la fa vibrare. Un’estrusione sulla lavagna di un menu retrò la colloca nel tempo. Un bagliore sul poster di un evento notturno evoca la sala. Quando l’effetto non dice nulla, diventa decorazione, e la decorazione invecchia in fretta.
Una sola parola grande è il posto in cui un effetto si guadagna lo spazio: c’è poco da leggere e molto da sentire.
Sul poster di un evento, l’effetto va solo sul titolo. Date e dettagli restano semplici.
Da evitare
- Un effetto sul titolo e anche sul testo
- Contorno più ombra più bagliore su una sola parola
- Colori predefiniti, come un’ombra nera su tutto
- Font sottili o leggeri sotto effetti pesanti
- Effetti usati per rendere eccitante un testo debole
Da fare
- Un solo effetto, sulle poche parole più grandi
- Un trattamento per design, usato con convinzione
- Colori dell’effetto presi dalla palette dello sfondo
- Forme delle lettere pesanti e semplici che reggono l’effetto
- Un testo che funziona da solo, poi un effetto che aggiunge tono
Come rendere leggibile il testo con contorno
Il testo con contorno è l’effetto con più probabilità di fallire, perché toglie la forma piena che rende le lettere facili da riconoscere. Usalo su un bastoni o un egiziano pesante con forme aperte, a grandi dimensioni, su uno sfondo calmo. Imposta un tratto abbastanza spesso da leggersi come una linea e non come un filo: circa dal 2 al 4 per cento della dimensione del font è un buon punto di partenza.
Uno schema affidabile abbina una parola piena a una parola con contorno, come Summer piena e Sessions con contorno. La parola piena ancora la lettura; il contorno aggiunge ritmo. Evita del tutto il contorno sul testo piccolo, e controllalo su un telefono, dove i tratti sottili spariscono per primi.
/* Outline: a stroke, no fill. */
.outline {
color: transparent;
-webkit-text-stroke: 0.03em #f5f0ff;
}
/* Extrude: stacked shadows, each 1px further. */
.extrude {
color: #fde8d0;
text-shadow:
1px 1px 0 #d9485f,
2px 2px 0 #d9485f,
3px 3px 0 #b83250,
4px 4px 0 #b83250,
5px 5px 0 #8f2442,
6px 6px 0 #8f2442;
}
/* Echo: one offset copy in a palette colour. */
.echo {
color: #ffffff;
text-shadow: 0.06em 0.06em 0 #7c3aed;
}
/* Halo: a soft glow for dark grounds. */
.halo {
color: #fff7ed;
text-shadow: 0 0 0.25em rgb(251 146 60 / 0.55),
0 0 0.8em rgb(244 114 182 / 0.35);
}-webkit-text-stroke funziona in tutti i principali browser nonostante il prefisso. Le ombre in em si scalano con il testo.Scegliere i colori per gli effetti di testo
Gli effetti sembrano aggiunti quando i loro colori arrivano dal nulla. Sembrano progettati quando arrivano dallo sfondo. Prendi il colore del lato dell’estrusione dalla parte più scura del gradiente, l’eco dal suo colore più saturo e il bagliore dal suo colore più chiaro. L’effetto allora si legge come luce e materia della stessa scena.
Mantieni le lettere stesse ad alto contrasto con lo sfondo, e lascia che l’effetto stia tra i due in luminosità. Così l’effetto aggiunge profondità senza togliere contrasto alle lettere. Per le regole di contrasto di base, vedi il contrasto dei colori.
Gli effetti di testo in Gradiently
Lo Studio di Gradiently include otto trattamenti di Lettering: Contorno, Incisione, Ritaglio, Estrusione, Doppio, Scia, Riso e Alone. Un Mark sa anche dove sono le parole: la sua zona più calma si sposta dietro di esse, e Inchiostro automatico sceglie un testo chiaro o scuro per ogni riga dalla palette del Mark stesso, il che dà a una parola trattata uno sfondo stabile su cui poggiare. Le stesse regole valgono comunque: un trattamento, poche parole, un carattere pesante.
Una sola frase trattata su un campo calmo mostra la sobrietà al lavoro.
Per saperne di più su come far leggere il testo su sfondi colorati, leggi il testo su un gradiente; per gli effetti costruiti nel gradiente stesso, vedi il testo con gradiente in CSS.
Le domande più frequenti
Quali effetti di testo sembrano moderni?
Quelli sobri: un contorno spesso abbinato a una parola piena, una piccola eco sfalsata, un leggero fuori registro riso o un bagliore morbido su uno sfondo scuro, ognuno usato su una o due parole grandi.
Come creo un testo con contorno in CSS?
Imposta il colore del testo su trasparente e aggiungi -webkit-text-stroke con uno spessore e un colore, ad esempio -webkit-text-stroke: 0.03em #ffffff. Funziona in tutti i principali browser.
Come creo un effetto testo 3D?
Sovrapponi diversi livelli di text-shadow, ognuno spostato di un pixel in più nella stessa direzione, sempre più scuri verso il fondo. Prendi i colori dallo sfondo, così la profondità sembra illuminata dalla stessa luce.
Gli effetti di testo peggiorano la leggibilità?
Possono farlo. Limita gli effetti a parole grandi e pesanti, un effetto per design, e verifica che le lettere abbiano ancora un forte contrasto con lo sfondo.
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
