Ombra del testo: quando aiuta e le alternative migliori

L’ombra del testo aiuta in due situazioni: come stile deliberato, di solito un’ombra netta sfalsata di qualche pixel senza sfocatura, e come sottile bordo di sicurezza sui sottotitoli sopra un video in movimento. Come salvataggio per parole che non si leggono su una foto o un gradiente di solito fa danni: ombre morbide e bagliori sfocano proprio i bordi che l’occhio usa per riconoscere le lettere, e fanno invecchiare un design all’istante. Per la leggibilità, sposta le parole in un’area più calma, aggiungi un velo sfumato, tingi lo sfondo o scegli un peso più robusto.

Tipi di effetto ombra del testo

Quando l’ombra del testo aiuta

Come stile netto e sfalsato

Un’ombra senza sfocatura, spostata di qualche percento dell’altezza della lettera e in un colore a contrasto preso dalla palette, è uno stile tipografico con una lunga storia su poster, confezioni e insegne. Sembra sicura di sé e un po’ nostalgica. Trattala come qualsiasi effetto: uno per design, poche parole grandi, un carattere robusto. Gli effetti di testo la confrontano con gli altri trattamenti. Gli effetti di testo retrò mostrano i suoi cugini stretti, il doppio e la scia.

Dietro i sottotitoli nei video

Sottotitoli e didascalie stanno sopra immagini che cambiano a ogni fotogramma, quindi non puoi scegliere un’area calma. Un’ombra stretta e scura o un contorno sottile mantiene leggibili i sottotitoli bianchi quando dietro passa una finestra luminosa. Tienila vicina alle lettere: sfocatura breve e poco o nessuno scostamento. Il design dei sottotitoli video tratta dimensioni e posizione.

Quando l’ombra del testo fa danni

Il problema di usare un’ombra per correggere il contrasto è che cura il sintomo. Lo sfondo è sempre fitto; hai solo aggiunto una macchia intorno alle lettere. I bagliori morbidi sono i peggiori, perché spargono una nuvola sfocata oltre ogni lettera e ammorbidiscono il bordo che ne definisce la forma. Sui post social si comprimono anche male, trasformandosi in fasce a chiazze.

Alternative migliori all’ombra del testo

1. 1

   Sposta le parole

   Trova l’area più calma e uniforme dello sfondo e mettici il testo. Questo risolve la maggior parte dei problemi prima che nascano.

2. 2

   Aggiungi un velo sfumato

   Una dissolvenza morbida dallo scuro al trasparente lungo un bordo dà contrasto senza una forma visibile. Il testo leggibile sulle foto ha i codici dei veli.

3. 3

   Calma lo sfondo

   Tingi una foto in uno o due colori, abbassa le sue alte luci o scegli un gradiente con una regione più quieta.

4. 4

   Rafforza il carattere

   Sali di un peso e di una dimensione. Un sans in grassetto a dimensione generosa non ha bisogno di aiuto sulla maggior parte degli sfondi.

5. 5

   Cambia l’inchiostro

   A volte il testo scuro su un’area chiara batte il testo bianco con un’ombra. Scegli l’inchiostro riga per riga, non per l’intero design.

Sui gradienti in particolare, il fondo spesso si schiarisce o si scurisce lungo il fotogramma, quindi un solo colore d’inchiostro non va bene per ogni riga. Il testo su un gradiente mostra come pianificarlo, e il testo su sfondi fitti tratta motivi e texture.

L’ombra del testo in CSS

La proprietà CSS text-shadow accetta uno scostamento orizzontale, uno verticale, un raggio di sfocatura facoltativo e un colore. Separa più ombre con virgole; la prima indicata sta sopra. Usa le unità em perché l’ombra segua la dimensione del carattere. Il riferimento completo è su MDN.

/* Hard offset style: no blur, colour from the palette */
.headline-offset {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #9a3412;
}

/* Tight caption edge for text over video */
.caption {
  color: #ffffff;
  text-shadow: 0 0 0.12em rgb(0 0 0 / 0.9), 0 0.04em 0.08em rgb(0 0 0 / 0.8);
}

/* Preferred fix for readability: a scrim, not a shadow */
.hero {
  background:
    linear-gradient(0deg, rgb(15 23 42 / 0.8) 0%, rgb(15 23 42 / 0) 55%),
    url("/images/hero.jpg") center / cover;
}

I verificatori automatici di contrasto confrontano il colore del testo con quello dello sfondo e ignorano l’ombra. Se uno strumento segnala il tuo testo come a basso contrasto, un’ombra può farlo sembrare migliore sul tuo schermo ma non cambia la misura. Correggi invece lo sfondo o l’inchiostro. Il CSS per l’ombra del testo ha più ricette per il web.

Come Gradiently gestisce la leggibilità

Gradiently è nato dall’idea che le parole non dovrebbero aver bisogno di essere salvate. Un Mark sa dove sono le parole: la sua regione più calma e più contrastata si sposta dietro il testo, i colori vicino alle lettere si scuriscono o si schiariscono e i dettagli fitti si distendono. L’inchiostro automatico sceglie poi testo chiaro o scuro per ogni riga dalla palette del Mark stesso. Non entrano in gioco riquadri, ombre né sfocature, e scegli tu quanto risponde il Mark. Se vuoi la profondità come stile, il trattamento di lettering Estrusione dà lettere profonde nei colori del Mark e Doppio disegna due volte lettere aperte, entrambi nitidi e privi di sfocatura.