Testo con contorno: lettere vuote che restano leggibili

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.

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 ne propongono altri.

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ò 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.
• Contorno al passaggio del mouse o in un secondo stato: sul web, un pulsante o un link vuoto che si riempie quando viene selezionato.

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 ha i dettagli.

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

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

1. 1

   Scegli la parola

   Una o due parole che portano il messaggio, mai una frase.

2. 2

   Impostala pesante e grande

   Un peso black a misura da titolo. Il lettering con contorno non è per il testo corrente.

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

   Prendi il colore dallo sfondo

   Usa il suo tono più chiaro o più scuro, così il tratto appartiene al design.

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