# Testo con contorno: lettere vuote che restano leggibili

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

Le lettere vuote sono nitide su un poster e svaniscono su un telefono più spesso di qualsiasi altro effetto. Ecco come scegliere carattere, tratto e layout perché reggano, con un CSS che funziona in ogni browser.

## The short version

- L’effetto testo con contorno disegna solo il bordo di ogni lettera, lasciando vuoto l’interno così lo sfondo si vede attraverso.
- Il testo con contorno si legge meglio in un sans o uno slab pesante dalle forme aperte, in corpo grande, con un tratto di circa il 2-4 per cento della misura del carattere.
- Abbinare una parola con contorno a una parola piena dà al lettore un punto d’appoggio e fa del contorno un ritmo, non l’intero messaggio.
- In CSS il testo con contorno si ottiene con -webkit-text-stroke e un colore trasparente, che ogni grande browser supporta.
- Evita di contornare testi piccoli, pesi sottili o caratteri corsivi, perché i tratti sottili sono la prima cosa che uno schermo di telefono perde.

L’**effetto testo con contorno** mostra solo il bordo di ogni lettera, con l’interno vuoto così lo sfondo si vede attraverso. Si legge quando valgono tre condizioni: un carattere pesante dalle forme aperte, un tratto abbastanza spesso da sembrare una linea (circa il 2-4 per cento della misura del carattere) e un corpo grande con uno sfondo calmo dietro. Il layout più affidabile abbina una parola piena a una parola con contorno, così l’occhio ha qualcosa di solido da leggere per primo.

## Perché il testo con contorno si legge male

Riconosciamo le lettere dalle loro forme piene. Un contorno toglie quella massa e lascia due linee sottili per ogni tratto, un bordo esterno e uno interno. A corpi grandi l’occhio riempie di nuovo la forma. A corpi piccoli, o con un tratto sottilissimo, le due linee si confondono o scompaiono nello sfondo. Un fondo movimentato peggiora le cose, perché l’interno vuoto mostra ogni minimo dettaglio di texture.

### Non regge

- Pesi leggeri o regular
- Tratti sottilissimi sotto l’1 per cento della misura
- Caratteri corsivi o serif ad alto contrasto
- Frasi intere con contorno
- Testo piccolo sotto i 60 px circa in un post
- Una foto ricca di dettagli che traspare tra le lettere

### Regge

- Pesi black, heavy o extra bold
- Tratti intorno al 2-4 per cento della misura
- Caratteri sans, slab o grotesque robusti
- Una o due parole, il resto pieno
- Misure da titolo, da 120 px in su in un post
- Un gradiente calmo o un colore pieno dietro

## Scegliere il carattere e il tratto

Parti dal peso. Un carattere black o extra bold ha tratti larghi, quindi il suo contorno descrive comunque una forma chiara. Aiutano anche le lettere aperte: le contro-forme tonde di O, A ed e restano visibili invece di chiudersi. Caratteri come Archivo Black, Anton o un grotesque pesante sono buoni punti di partenza; [i font bold](https://gradiently.design/it/guide/bold-fonts) ne propongono altri.

| Corpo del carattere | Spessore del tratto | Uso |
| --- | --- | --- |
| 60 px | 2 px | Il minimo per una parola vuota, e solo su un fondo piatto |
| 120 px | 3-4 px | Titoli di post social larghi 1080 px |
| 200 px | 5-7 px | Grandi parole singole e righe da poster |
| 400 px | 10-14 px | Parole di sfondo extra large e banner |

Spessori del tratto a circa il 2-4 per cento del corpo. Vai più spesso sui pesi leggeri; più sottile solo se le lettere cominciano a impastarsi.

Il colore conta quanto lo spessore. Un tratto chiaro su fondo scuro si legge più facilmente di uno scuro su fondo chiaro, perché le linee chiare sembrano allargarsi un poco. Prendi il colore del tratto dalla parte più chiara o più scura dello sfondo, così sembra parte del design. Se lo sfondo è un gradiente, controlla il tratto dove il fondo è più vicino al suo colore: è lì che il contorno sparirà per primo.

## Layout in cui il testo con contorno funziona

- **Coppia piena e vuota**: *Summer* pieno, *Sessions* con contorno. La parola piena ancora, il contorno dà ritmo.
- **Parola ripetuta**: la stessa parola impilata tre o quattro volte, una piena e le altre con contorno, per un senso di eco o movimento. [Gli effetti testo retrò](https://gradiently.design/it/guide/retro-text-effect) trattano gli aspetti affini del doppio e della scia.
- **Parola di sfondo**: una parola enorme con contorno dietro a un titolo pieno più piccolo, che fa da texture e non da testo. Per la profondità invece del vuoto, vedi [l’effetto testo 3D](https://gradiently.design/it/guide/3d-text-effect).
- **Contorno al passaggio del mouse o in un secondo stato**: sul web, un pulsante o un link vuoto che si riempie quando viene selezionato.

Un post verticale con la parola Sessions molto grande e un piccolo sopratitolo Summer sopra di essa

Una grande parola, la forma che si addice alle lettere con contorno: corta e pesante, con piccoli dettagli pieni sotto.

Una storia verticale per una rassegna musicale estiva con la parola Sessions come titolo

La stessa parola in una storia. Il formato alto lascia spazio per ripeterla lungo la pagina, una copia piena e le altre vuote.

## Come fare il testo con contorno in CSS

La proprietà è `-webkit-text-stroke`. Nonostante il prefisso, funziona in ogni grande browser e fa parte dello standard di compatibilità web. Imposta il colore del testo su trasparente per una parola vuota, oppure tieni un riempimento per una lettera piena con un bordo. Il [riferimento MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke) ha i dettagli.

```css
.outline {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 1;
  color: #fafaf9; /* fallback: solid letters */
}

@supports (-webkit-text-stroke: 1px black) {
  .outline {
    color: transparent;
    -webkit-text-stroke: 0.03em #fafaf9; /* about 3% of the size */
  }
}

/* Solid and hollow pair */
.outline-pair .solid { color: #fafaf9; }
.outline-pair .hollow {
  color: transparent;
  -webkit-text-stroke: 0.03em #fafaf9;
}
```

Un tratto in `em` scala con il corpo del carattere. Il blocco `@supports` mantiene le lettere piene dove la proprietà non è disponibile.

> **Il tratto mangia la lettera** Il CSS disegna il tratto centrato sul bordo della lettera, quindi metà cade all’interno. Tratti spessi su una parola piena la fanno sembrare più sottile e possono chiudere le piccole contro-forme. In SVG, `paint-order: stroke` disegna il tratto dietro al riempimento ed evita il problema.

Gli screen reader leggono il testo con contorno normalmente, perché è ancora testo vero. Mantienilo tale: non appiattire i titoli con contorno in immagini su un sito web. Il contrasto resta il rischio, perché gli strumenti misurano il colore del testo, che ora è trasparente. Controlla il tratto rispetto allo sfondo a occhio e con un verificatore di contrasto sul colore del tratto. [Contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) tratta i rapporti.

## Tratto esterno e inline: due stili di lettering affini

Il lettering con contorno ha dei parenti che conservano più della forma piena. Un **tratto esterno** disegna una linea intorno a una lettera piena, separandola dallo sfondo come il bordo di un adesivo. Un **inline** taglia una linea sottile dentro ogni tratto, l’aspetto dei caratteri da titolo incisi e vittoriani, e di molte insegne. Entrambi si leggono più facilmente di una parola totalmente vuota, quindi sono una buona scelta quando le parole devono funzionare a corpi più piccoli. Per la famiglia più ampia di trattamenti, vedi [gli effetti testo](https://gradiently.design/it/guide/text-effects).

1. **Scegli la parola** Una o due parole che portano il messaggio, mai una frase.
2. **Impostala pesante e grande** Un peso black a misura da titolo. Il lettering con contorno non è per il testo corrente.
3. **Scegli tra vuoto, tratto esterno o inline** Vuoto per il dramma, un tratto esterno per staccare una parola da un fondo movimentato, inline per un’aria artigianale da insegna.
4. **Prendi il colore dallo sfondo** Usa il suo tono più chiaro o più scuro, così il tratto appartiene al design.
5. **Controllalo su un telefono** Guarda il post a dimensione reale. Se il contorno sfarfalla o scompare, ispessisci il tratto o riempi la parola.

I trattamenti Lettering di Gradiently coprono questa famiglia senza costruire a mano i livelli: Incisione scava una linea dentro ogni lettera, Doppio disegna due volte le lettere aperte, Scia lascia contorni che si trascinano dietro, e Contorno cinge le parole con linee di livello. Poiché il Mark dietro al design sposta la sua zona più calma dietro alle parole, un titolo vuoto o inline ottiene il fondo stabile di cui ha bisogno. Il lettering a gradiente è una tecnica a parte, trattata in [il testo a gradiente in CSS](https://gradiently.design/it/guide/css-gradient-text).

## FAQ

### Come si fa il testo con contorno in CSS?

Imposta `color: transparent` e `-webkit-text-stroke: 0.03em #ffffff` sul testo. La proprietà con prefisso funziona in tutti i grandi browser.

### Qual è il miglior font per il testo con contorno?

Un sans o uno slab pesante dalle forme aperte, come Archivo Black o Anton. I pesi sottili e i caratteri corsivi si sfaldano quando hanno il contorno.

### Quanto deve essere spesso il contorno del testo?

Circa il 2-4 per cento del corpo del carattere: intorno a 3-4 px per un titolo da 120 px.

### Il testo con contorno è accessibile?

Gli screen reader lo leggono normalmente, ma può non superare il contrasto. Usalo solo per parole grandi e controlla il colore del tratto rispetto allo sfondo.