Testo su sfondi movimentati senza un riquadro

Rendere leggibile il testo su sfondo movimentato, come una foto o una texture piena di dettagli, dipende da due cose: cosa c’è subito dietro le lettere e di che colore sono le lettere. Le soluzioni comuni, un riquadro, un’ombra o una sfocatura, cambiano ciò che sta dietro le lettere coprendolo. Le soluzioni migliori mettono le parole dove lo sfondo è già calmo, scelgono il colore per ogni riga e, dove lo strumento lo permette, lasciano che sia lo sfondo a fare spazio invece di rattopparlo.

Perché sfondi movimentati e testo si scontrano

La lettura dipende dal contrasto tra ogni lettera e ciò che la circonda. Su un colore piatto, quel contrasto è uguale ovunque. Su una foto, un motivo o un gradiente vivace, cambia di continuo: una lettera sta su una luce, la successiva su un’ombra, e la parola si spezza. Il dettaglio peggiora le cose, perché i bordi e le forme dello sfondo somigliano un po’ ai tratti delle lettere, e l’occhio deve separare le due cose.

Per questo le linee guida sul contrasto, come i rapporti descritti in il contrasto dei colori, sono difficili da applicare sugli sfondi movimentati: non c’è un unico colore di sfondo con cui misurare. La prova onesta è il punto peggiore, la zona più chiara dietro un testo chiaro o la più scura dietro un testo scuro.

Le soluzioni abituali, e quanto costa ciascuna

Ogni soluzione standard funziona cambiando ciò che sta subito dietro le lettere. Sono tutte legittime, e tutte tolgono qualcosa allo sfondo che hai scelto.

Se ne usi una, usala con delicatezza. Uno scrim che sfuma su un’area ampia si nota meno di un riquadro, e un’ombra morbida e ampia sembra meno datata di una netta. Ecco una versione misurata per il web:

.hero {
  position: relative;
}

/* A soft scrim: dark at the bottom, where the text sits, gone by the middle. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.2) 35%, rgb(0 0 0 / 0) 60%);
  pointer-events: none;
}

.hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  /* A wide, faint shadow reads as depth, not as an outline. */
  text-shadow: 0 1px 24px rgb(0 0 0 / 0.35);
}

Meglio: metti le parole dove lo sfondo è calmo

La maggior parte degli sfondi movimentati ha una zona più quieta: un tratto di cielo, una morbida macchia di colore, un’area fuori fuoco. Spostare lì il testo, o ritagliare in modo che quella zona cada dove va il testo, risolve il problema senza coprire nulla. Quando scegli o crei uno sfondo, cercane uno con una zona calma dove di solito stanno le tue parole.

La stessa idea vale per le foto, dove ritaglio, sfocatura e duotone possono creare calma; il testo su immagine passa in rassegna sette tecniche. Sui gradienti, la zona calma è di solito dove il colore cambia più lentamente; il testo su un gradiente mostra come trovarla.

Scegli il colore del testo per ogni riga

Uno sfondo che va dal chiaro allo scuro non può essere servito da un solo colore di testo. Un testo bianco si legge sulla metà scura e sparisce su quella chiara. Invece di forzare un pannello dietro, scegli il colore per ogni riga: chiaro dove lo sfondo dietro quella riga è scuro, scuro dove è chiaro. Prendi entrambi i colori dalla palette dello sfondo stesso, un tono profondo e uno pallido, così sembrano parte del design e non incollati sopra.

Lascia muovere lo sfondo, non le parole

La soluzione più discreta di tutte è uno sfondo che sa dove sono le parole. È così che si comporta un Mark di Gradiently: invece di essere coperto, si riorganizza. Tutta la materia scivola in modo che la sua zona più calma e contrastata stia dietro il testo; vicino alle lettere, i colori si scuriscono sotto un testo chiaro e si schiariscono sotto un testo scuro; le creste più movimentate si distendono. Niente di tutto questo è una forma che puoi indicare. Si legge come il design, perché è il design.

L’altra metà è il colore del testo. Imposta il testo su Inchiostro automatico e ogni riga sceglie il colore chiaro o scuro che si legge meglio rispetto a ciò che ha davvero dietro, da una coppia presa dalla palette del Mark stesso. Sposta un titolo da una zona luminosa a una scura e cambia in silenzio. Decidi tu quanto forte reagisce lo sfondo: appena percettibile, equilibrato, o un vero palco per un titolo che deve arrivare.

La migliore soluzione per la leggibilità è quella che nessuno nota.

Una checklist per il testo su sfondi movimentati

1. 1

   Trova prima la zona calma

   Posiziona o ritaglia in modo che le parole stiano sulla parte più uniforme dello sfondo.

2. 2

   Controlla il punto peggiore

   Verifica il contrasto nel punto più chiaro dietro un testo chiaro o nel più scuro dietro un testo scuro, non nella media.

3. 3

   Scegli il colore per riga

   Chiaro sullo scuro, scuro sul chiaro, entrambi presi dalla palette dello sfondo.

4. 4

   Usa peso e dimensione

   Un testo più pesante e più grande sopravvive a sfondi più movimentati. I pesi sottilissimi no. I font per i social propone caratteri che reggono.

5. 5

   Metti una toppa solo come ultima risorsa

   Se proprio devi, usa la soluzione più delicata: uno scrim morbido invece di un riquadro, un’ombra ampia e leggera invece di una netta.