# Effetti di testo che non sembrano datati: contorno, estrusione, eco

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

La maggior parte degli effetti di testo sembra datata perché viene applicata a tutto, alla massima intensità, senza un motivo. Usati su una sola parola, con il peso e il colore giusti, sono tra gli strumenti più espressivi della tipografia.

## The short version

- 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.

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](https://gradiently.design/it/guide/display-fonts), 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 |

Sette famiglie di effetti per il lettering. Più alto è il rischio, più cura richiede l’effetto.

## 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.

Un design verticale con una sola parola grande su un gradiente vivace, il tipo di layout adatto a un effetto di lettering

Una sola parola grande è il posto in cui un effetto si guadagna lo spazio: c’è poco da leggere e molto da sentire.

Un poster verticale per un evento con un titolo stilizzato e dettagli semplici su un gradiente scuro

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.

```css
/* 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);
}
```

Quattro effetti in CSS semplice. `-webkit-text-stroke` funziona in tutti i principali browser nonostante il prefisso. Le ombre in `em` si scalano con il testo.

> **Accessibilità** Gli effetti costruiti in CSS mantengono le parole come testo vero, così screen reader, motori di ricerca e strumenti di traduzione continuano a leggerle. Gli effetti incorporati nelle immagini richiedono che le parole siano ripetute nel testo alternativo.

## 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.

- Sfondo: viola notte: #1a1033
- Eco: viola: #7c3aed
- Bagliore: luce rosa: #f472b6
- Lettere: bianco caldo: #fde8d0

Colori dell’effetto presi da un unico gradiente: uno sfondo scuro, un’eco satura, un bagliore e un bianco caldo per le lettere.

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](https://gradiently.design/it/guide/color-contrast-accessibility).

## 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.

Un design quadrato con una frase breve in grande su un gradiente calmo, con molto spazio vuoto

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](https://gradiently.design/it/guide/text-on-gradient); per gli effetti costruiti nel gradiente stesso, vedi [il testo con gradiente in CSS](https://gradiently.design/it/guide/css-gradient-text).

## FAQ

### 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.