# Post con citazioni che non somigliano a tutti gli altri

[Canonical HTML page](https://gradiently.design/it/guide/quote-post-design)

I post con citazioni sono facili da fare e facili da ignorare. La differenza tra le due cose sta soprattutto nella tipografia, e in uno sfondo che nessun altro usa.

## The short version

- Un post con citazione funziona quando la citazione è breve, attribuita correttamente e composta in grande con un font che abbia un po’ di carattere.
- Le virgolette tipografiche, con quella di apertura sporgente fuori dal testo, fanno sembrare una citazione composta da un designer e non digitata.
- L’attribuzione va su una riga a sé in un corpo più piccolo; un a capo e un cambio di dimensione la separano senza bisogno di altra punteggiatura.
- Le foto di stock di tramonti e montagne sono il motivo per cui la maggior parte dei post con citazioni si somiglia, mentre un gradiente o una texture discreti e tuoi li rendono riconoscibili.
- Le citazioni pubblicate come serie, in un unico layout fisso, diventano un formato riconoscibile che le persone imparano a cercare.

Un buon **post con citazione** si riduce a quattro cose: una citazione asciugata fino alla sua frase più forte, composta in grande con un font che abbia carattere, attribuita in modo pulito su una riga a sé e collocata su uno sfondo che ti appartiene invece che su un tramonto di stock. Fai bene queste cose e un post con citazione si legge come un design ragionato, non come un riquadro in più nel feed.

## Scegliere e asciugare la citazione

I migliori post con citazioni portano un solo pensiero che arriva alla prima lettura. I passaggi lunghi diventano testo piccolo, e il testo piccolo viene scrollato via. Punta a una citazione di circa 8-20 parole. Se la citazione completa è più lunga, usa la frase che porta l’idea e metti il resto nella didascalia.

### Troppo

- Tre frasi di contesto prima del punto
- Un paragrafo rimpicciolito per stare nel quadrato
- Una frase non verificata attribuita a un nome famoso
- Parole tue avvolte nel nome di qualcun altro

### Il giusto

- L’unica frase che dice il punto
- Abbastanza poche parole da poterle comporre in grande
- Una citazione che hai verificato alla fonte
- Parole tue, attribuite a te, o nessuna attribuzione

> **Controlla prima di pubblicare** Le citazioni sono tra le cose più spesso attribuite in modo sbagliato online. Se non trovi una frase nel libro, nel talk o nell’intervista originale, non pubblicarla con quel nome. Citi un cliente o un collega? Chiediglielo prima.

## La tipografia dei post con citazioni

In un post con citazione il testo *è* il design, quindi scegli un font con un po’ di personalità. Un serif con un buon corsivo si adatta a citazioni riflessive o letterarie; un grotesque robusto a frasi brevi e incisive; un font display può reggere una o due parole. [Serif o sans serif](https://gradiently.design/it/guide/serif-vs-sans-serif) spiega cosa tende a comunicare ciascuno, e l’[abbinamento dei font](https://gradiently.design/it/guide/font-pairing) spiega come aggiungere un secondo font per l’attribuzione.

- **Componila in grande.** Su un post largo 1080 pixel, una citazione breve può stare tra 70 e 110 pixel.
- **Stringi l’interlinea.** Le righe grandi sembrano slegate con un’interlinea normale; intorno a 1,1-1,2 restano compatte.
- **Vai a capo secondo il senso.** Chiudi ogni riga su una pausa naturale, non dove capita che la casella di testo vada a capo.
- **Usa le virgolette tipografiche.** Le caporali « » o le alte curve “ ” invece delle virgolette dritte ", che sembrano digitate.
- **Fai sporgere la virgoletta di apertura.** Lascia che la virgoletta di apertura stia appena fuori dal margine sinistro, così le lettere restano allineate.

```css
.quote {
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1.15;
  text-wrap: balance;
  hanging-punctuation: first;
}

/* Where hanging-punctuation isn't supported, pull the first line back by the width of the mark. */
@supports not (hanging-punctuation: first) {
  .quote { text-indent: -0.42em; }
}
```

Punteggiatura sporgente sul web. Il supporto dei browser per `hanging-punctuation` è limitato, quindi controlla [caniuse](https://caniuse.com/css-hanging-punctuation) e tieni il rientro negativo come alternativa. In uno strumento di design, basta spostare la virgoletta a sinistra.

Un post verticale con una breve citazione in un grande carattere serif e una piccola attribuzione

Verticale: la citazione grande e centrata, l’attribuzione piccola sotto.

Una versione quadrata dello stesso post con citazione sullo stesso sfondo

Quadrato: la stessa citazione su meno righe, così può restare altrettanto grande.

## Come attribuire una citazione in modo pulito

L’attribuzione deve essere facile da trovare e abbastanza discreta da non fare concorrenza. Metti il nome su una riga a sé, un gradino ben visibile più piccolo della citazione, in un peso diverso o in maiuscolo con un po’ di spaziatura in più (leggi [spaziatura delle lettere](https://gradiently.design/it/guide/letter-spacing)). Non serve alcuna punteggiatura prima del nome: l’a capo e il cambio di dimensione dicono già chi l’ha detto.

| Parte | Trattamento | Esempio |
| --- | --- | --- |
| Citazione | Grande, tondo o corsivo | «Crea ciò che vorresti che esistesse.» |
| Nome | Piccolo, peso medio o maiuscolo | Il nome completo di chi parla |
| Fonte | Ancora più piccola, più leggera | Taccuino dello studio, 2026 |

Tre gradini di dimensione e peso, così l’occhio legge prima la citazione, poi chi l’ha detta, poi dove.

## Sfondi per i post con citazioni

Il motivo per cui la maggior parte dei post con citazioni si somiglia è lo sfondo: una montagna all’alba, una spiaggia, un caffè sfocato. Quelle immagini sono condivise da migliaia di account e non dicono nulla di te. Un gradiente o una texture discreti nei tuoi colori fanno l’opposto. Danno spazio alle parole, sono riconoscibilmente tuoi e tengono lo sguardo di chi legge sulla citazione.

- Carta e inchiostro: `linear-gradient(170deg, #f7f1e8 0%, #efe3d0 60%, #e2cfb3 100%)`
- Lettura notturna: `linear-gradient(170deg, #0d1321 0%, #1d2d44 60%, #3e5c76 100%)`
- Alba tenue: `linear-gradient(170deg, #fde2e4 0%, #f6d5e8 50%, #d7d3f5 100%)`
- Marrone a lume di candela: `radial-gradient(ellipse at 50% 40%, #3a2a1e 0%, #1f1610 70%, #120d09 100%)`

Quattro fondi discreti per le citazioni. Ognuno ha un’area uniforme e calma al centro, dove stanno le parole. Abbina i due chiari a un inchiostro quasi nero e i due scuri a un bianco sporco caldo.

Tieni la parte più calma e uniforme dello sfondo dietro le parole, e controlla lì il contrasto. Il [testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) spiega come scegliere l’inchiostro in base alla luminosità, così la citazione resta leggibile su ogni parte del campo.

## Trasformare le citazioni in una serie riconoscibile

Un post con citazione è un bel momento. Venti nello stesso layout diventano un formato che le persone riconoscono da un capo all’altro del feed, e una serie di citazioni è uno dei modi più semplici per dare ritmo a una griglia, come descritto in [estetica della griglia Instagram](https://gradiently.design/it/guide/instagram-grid-aesthetic).

1. **Fissa il layout** Stesso font, stessa gamma di dimensioni, stessa posizione per la citazione e il nome, ogni volta.
2. **Fissa la famiglia di sfondi** Un materiale o una famiglia di gradienti, variati leggermente da un post all’altro.
3. **Dagli un nome o un numero** Una piccola etichetta come *Pensiero del giovedì* o *N. 12* trasforma i singoli post in una serie.
4. **Tieni una scorta** Raccogli citazioni verificate in un elenco con le loro fonti, così ogni nuovo post richiede pochi minuti.

In Gradiently un modello per citazioni può indossare qualsiasi Mark, e il Mark sposta la sua zona più calma dietro le parole, così una citazione si legge senza riquadri né ombre. Riservare un Mark rende quello sfondo solo tuo.

## FAQ

### Qual è il font migliore per i post con citazioni?

Un serif con un buon corsivo si adatta alle citazioni riflessive, e un sans serif robusto alle frasi brevi e incisive. Scegline uno con carattere e componilo in grande.

### Quanto deve essere lunga una citazione per un post social?

Circa 8-20 parole funzionano meglio. Le citazioni più lunghe costringono a un testo piccolo; sposta il resto nella didascalia.

### Come attribuisco una citazione in un post?

Metti il nome su una riga a sé, chiaramente più piccolo della citazione, con la fonte ancora più piccola. Un a capo e un cambio di dimensione bastano; non serve altra punteggiatura.

### Perché i miei post con citazioni sembrano generici?

Di solito per lo sfondo. Le foto di paesaggi di stock sono usate da migliaia di account; un gradiente o una texture discreti nei tuoi colori rendono le citazioni riconoscibili.