Come rendere leggibile il testo sulle foto senza un riquadro

Per rendere leggibile il testo sulle foto senza metterlo in un riquadro, parti dalla posizione: trova o crea l’area più calma dell’immagine e metti lì le parole. Se non basta, aggiungi una sfumatura scura, una dissolvenza morbida dal trasparente allo scuro lungo un bordo, poi abbassa il contrasto della foto con una virata e infine rendi i caratteri più pesanti e grandi. Usate in quest’ordine, queste mosse tengono la foto intatta e le parole chiare. Un riquadro è l’ultima risorsa, non il punto di partenza.

Questa pagina riguarda in particolare l’approccio senza riquadro. Per ogni tecnica, compresi riquadri, fasce e ritagli, vedi testo sopra un’immagine.

Perché il testo si perde sulle foto

Il testo ha bisogno di una differenza di luminosità tra le lettere e ciò che c’è dietro. Una foto cambia luminosità di continuo: una camicia bianca accanto a una porta scura, foglie contro il cielo. Ovunque una lettera passi dal chiaro allo scuro, una parte sparisce. I dettagli fini peggiorano le cose, perché l’occhio non riesce a separare il bordo della lettera dalla texture dietro.

Sei modi per rendere leggibile il testo sulle foto

1. Scegli e ritaglia per lo spazio vuoto

La soluzione migliore arriva prima di scrivere una parola. Scegli foto con un’area vuota: cielo, un muro, un piano di tavolo, uno sfondo sfocato. Poi ritaglia in modo che quell’area stia dove va il titolo. Un post verticale a 1080×1350 ti dà spazio per spingere il soggetto in basso e lasciare calmo il terzo superiore. Se puoi, scatta pensando a questo: fai un passo indietro e lascia spazio sopra il soggetto. Testo su sfondi complessi tratta motivi e texture che si comportano come foto complesse.

2. Aggiungi una sfumatura scura

Una sfumatura scura è un gradiente steso sulla foto, scuro sul bordo dove sta il testo e che sfuma fino al completamente trasparente. Poiché sfuma, l’occhio la legge come luce che si spegne e non come una forma. Tienila sul terzo dell’immagine che contiene le parole e usa un tono scuro preso dalla foto invece del nero puro.

3. Vira la foto

Virare una foto in uno o due colori restringe la sua gamma di chiari e scuri, così il testo sopra se la cava meglio ovunque. Una bicromia scura, come dal blu profondo al lilla tenue, funziona soprattutto dietro un testo bianco; effetto bicromia mostra come costruirne una. La virata fa anche sembrare un insieme di foto disomogenee parte di un unico brand.

4. Scurisci o schiarisci in modo locale

La maggior parte degli editor di foto permette di abbassare esposizione o alteluci in una sola zona. Abbassare di uno stop un cielo luminoso, proprio dietro il titolo, spesso basta da solo ed è invisibile a chi non ha visto l’originale.

5. Rendi il carattere più robusto

I caratteri sottili e piccoli sono i primi a sparire. Usa un peso semibold o bold, sali di una misura e apri leggermente la spaziatura sulle righe piccole. Un sans pesante a 110 px regge su una foto dove un serif leggero a 70 px non reggerà mai. Font in grassetto elenca caratteri affidabili.

6. Metti la foto accanto alle parole

A volte la risposta onesta è non sovrapporre affatto. Ritaglia la foto in un cerchio, un arco o metà inquadratura e metti le parole su un fondo semplice o a gradiente accanto. La foto resta intera e le parole hanno un contrasto perfetto.

Quale tecnica per quale foto

Come aggiungere in CSS un overlay a gradiente su un’immagine

Su un sito, sovrapponi la sfumatura scura e la foto in un’unica dichiarazione background. Il gradiente va per primo, così sta sopra. In questo modo l’effetto resta in CSS e si adatta a qualsiasi ritaglio faccia il layout.

.hero {
  min-height: 70vh;
  display: grid;
  align-items: end;
  padding: 4rem;
  color: #fafaf9;
  background:
    linear-gradient(0deg, rgb(12 10 9 / 0.85) 0%, rgb(12 10 9 / 0.4) 35%, rgb(12 10 9 / 0) 65%),
    url("/images/terrace.jpg") center / cover no-repeat;
  background-color: #1c1917; /* fallback while the image loads */
}

Verifica il risultato con le indicazioni sul contrasto: circa 4,5 a 1 per il testo normale e 3 a 1 per i titoli grandi, come spiegato nella guida al contrasto di WebAIM. Prova il punto più chiaro dietro le parole, non la media. Contrasto dei colori e accessibilità spiega i numeri.

Errori da evitare con il testo sulle foto

Aloni e bagliori attorno alle lettere sono il tentativo di salvataggio più comune e quello che sembra più economico. Sfocano i bordi delle lettere, l’opposto di ciò che serve per leggere. Se ti tentano, leggi prima ombre del testo e alternative migliori.

In Gradiently le foto si possono virare nei colori del Mark come mono, bicromia o velatura, e ritagliare in archi, cerchi e forme organiche da affiancare alle parole. Nei design in cui il Mark traspare, sposta la sua area più calma dietro il testo e l’inchiostro automatico sceglie testo chiaro o scuro per ogni riga, senza riquadri, ombre o sfocature.