# Come rendere leggibile il testo sulle foto senza un riquadro

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

Un riquadro pieno dietro il titolo funziona, ma fa sembrare ogni post un meme. Queste tecniche tengono la foto intera e le parole chiare, con il codice per il web e le impostazioni per i post social.

## The short version

- Il modo più affidabile per rendere leggibile il testo sulle foto è mettere le parole sull’area più calma e uniforme dell’immagine.
- Una sfumatura scura, una dissolvenza morbida dal trasparente allo scuro su un bordo della foto, dà contrasto al testo senza un riquadro visibile.
- Virare una foto in uno o due colori ne abbassa contrasto e dettaglio, e rende più leggibile qualsiasi testo sopra.
- I caratteri più pesanti e grandi resistono a una foto complessa molto meglio di quelli sottili o piccoli.
- Il testo sopra le foto deve comunque rispettare le indicazioni di contrasto, circa 4,5 a 1 per il testo piccolo e 3 a 1 per i titoli grandi.

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](https://gradiently.design/it/guide/text-over-image).

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

Un post verticale in cui il titolo corre su uno sfondo affollato e irregolare e parti delle lettere sono difficili da leggere

Il problema su uno sfondo Mark: parole messe direttamente su un’area affollata perdono lettere dove il fondo si schiarisce.

Lo stesso post verticale con un’area più calma e uniforme dietro il titolo, così ogni parola è leggibile

Le stesse parole con un’area calma e uniforme dietro, l’effetto che vuoi da un taglio ben scelto. Senza riquadro, e ogni lettera si legge.

## 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](https://gradiently.design/it/guide/type-on-busy-backgrounds) 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.

- Sfumatura in basso, nero caldo: `linear-gradient(0deg, #0c0a09d9 0%, #0c0a0973 30%, #0c0a0900 60%)`
- Sfumatura in alto, blu notte: `linear-gradient(180deg, #0f172acc 0%, #0f172a00 45%)`
- Sfumatura laterale, per testo a sinistra: `linear-gradient(90deg, #1c1917d9 0%, #1c19174d 40%, #1c191700 65%)`

Tre sfumature scure mostrate da sole. Stese su una foto, ognuna scurisce solo l’area che contiene le parole e svanisce prima del soggetto.

### 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](https://gradiently.design/it/guide/duotone-effect) 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](https://gradiently.design/it/guide/bold-fonts) 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

| Foto | Parti da | Poi |
| --- | --- | --- |
| Cielo sereno o muro liscio | Posizione | Nient’altro |
| Soggetto al centro, bordi affollati | Ritaglio per liberare un bordo | Sfumatura scura su quel bordo |
| Affollata ovunque (folla, mercato, fogliame) | Virata o bicromia | Carattere più pesante |
| Foto di prodotto luminosa, high key | Testo scuro nell’area più chiara | Abbassa localmente le alteluci |
| Notte o interno scuro | Testo bianco sull’area più scura | Leggera sfumatura se le luci attraversano le parole |
| Foto ricca di dettagli che non puoi modificare | La foto accanto alle parole | Un colore in comune per unirle |

Parti dalla tecnica meno visibile e fermati appena la riga più piccola si legge.

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

```css
.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 */
}
```

Una sfumatura scura in basso su una foto a tutta larghezza, con un colore scuro di riserva così il testo si legge prima che arrivi l’immagine.

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](https://webaim.org/articles/contrast/). Prova il punto più chiaro dietro le parole, non la media. [Contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) spiega i numeri.

## Errori da evitare con il testo sulle foto

### Da evitare

- Bagliori o aloni sfocati intorno a ogni lettera
- Un pesante overlay nero su tutta la foto
- Caratteri script sottili su una scena ricca di dettagli
- Mettere il testo attraverso un volto
- Correggere un brutto ritaglio con effetti sempre più forti

### Meglio

- Una sfumatura morbida su un solo bordo
- Una virata che mantiene l’atmosfera della foto
- Un peso robusto a una misura generosa
- Parole nello spazio accanto al soggetto
- Ritagliare di nuovo, o scegliere un’altra 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](https://gradiently.design/it/guide/text-shadow-alternatives).

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.

## FAQ

### Come faccio a far risaltare il testo su una foto complessa?

Mettilo sull’area più calma, aggiungi una sfumatura scura morbida su quel bordo, vira la foto per abbassarne il contrasto e usa un peso più pesante e grande.

### Cos’è una sfumatura scura (scrim) nel design?

È un overlay a gradiente che scurisce o schiarisce una parte di un’immagine, svanendo fino al trasparente, così il testo posto lì ha abbastanza contrasto.

### Devo usare un’ombra del testo per renderlo leggibile su una foto?

Un bagliore o un alone morbido di solito sembra economico e sfoca le lettere. Posizione, sfumatura scura o virata danno risultati più puliti.

### Che rapporto di contrasto serve al testo su una foto?

Punta a circa 4,5 a 1 per il testo normale e 3 a 1 per i titoli grandi, misurato nel punto più chiaro dietro le parole.