# Un design de post citation qui ne ressemble pas à tous les autres

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

Les posts citation sont faciles à faire et faciles à ignorer. La différence tient surtout à la typographie, et à un fond que personne d’autre n’utilise.

## The short version

- Un post citation fonctionne quand la citation est courte, correctement attribuée et composée en grand dans une police qui a du caractère.
- Des guillemets typographiques, avec le guillemet ouvrant suspendu hors du texte, donnent l’impression d’une citation composée par un designer plutôt que tapée.
- L’attribution a sa place sur sa propre ligne, en plus petit ; un retour à la ligne et un changement de taille la séparent sans ponctuation supplémentaire.
- Les photos de banque d’images de couchers de soleil et de montagnes expliquent pourquoi la plupart des posts citation se ressemblent, alors qu’un dégradé ou une texture discrète bien à vous les rend reconnaissables.
- Des citations publiées en série, dans une mise en page fixe, deviennent un format reconnaissable que l’on apprend à chercher.

Un bon **post citation** repose sur quatre choses : une citation réduite à sa ligne la plus forte, composée en grand dans une police qui a du caractère, attribuée proprement sur sa propre ligne, et posée sur un fond qui vous appartient plutôt que sur un coucher de soleil de banque d’images. Réussissez-les et un post citation se lit comme une création réfléchie plutôt que comme une vignette de plus dans le fil.

## Choisir et resserrer la citation

Les meilleurs posts citation portent une seule pensée qui fait mouche en une lecture. Les longs passages deviennent du petit texte, et le petit texte se fait défiler. Visez une citation d’environ 8 à 20 mots. Si la citation complète est plus longue, gardez la phrase qui porte l’idée et mettez le reste dans la légende.

### Trop

- Trois phrases de contexte avant l’essentiel
- Un paragraphe réduit pour tenir dans le carré
- Une phrase non vérifiée attribuée à un nom célèbre
- Vos propres mots placés sous le nom de quelqu’un d’autre

### Juste assez

- La seule phrase qui porte l’idée
- Assez peu de mots pour les composer en grand
- Une citation vérifiée à sa source
- Vos propres mots, attribués à vous, ou sans attribution

> **Vérifiez avant de publier** Les citations comptent parmi les contenus les plus mal attribués en ligne. Si vous ne trouvez pas une phrase dans le livre, la conférence ou l’entretien d’origine, ne la publiez pas sous ce nom. Vous citez un client ou un collègue ? Demandez-lui d’abord.

## La typographie des posts citation

Dans un post citation, la typographie *est* le design : choisissez donc une police qui a de la personnalité. Une police à empattements avec une belle italique convient aux citations réfléchies ou littéraires ; une grotesque affirmée aux phrases courtes et percutantes ; une police display peut porter un ou deux mots. [Serif ou sans serif](https://gradiently.design/fr/guide/serif-vs-sans-serif) explique ce que chacune évoque en général, et [l’association de polices](https://gradiently.design/fr/guide/font-pairing) montre comment ajouter une seconde police pour l’attribution.

- **Composez-la en grand.** Sur un post de 1080 pixels de large, une citation courte peut aller de 70 à 110 pixels.
- **Resserrez l’interlignage.** Les grandes lignes paraissent lâches avec un interlignage normal ; autour de 1,1 à 1,2, elles restent groupées.
- **Coupez les lignes selon le sens.** Terminez chaque ligne sur une pause naturelle, pas là où la zone de texte coupe par hasard.
- **Utilisez des guillemets typographiques.** En français, les chevrons avec une espace fine à l’intérieur, plutôt que les guillemets droits " qui font tapé à la machine.
- **Suspendez le guillemet ouvrant.** Laissez-le dépasser juste à gauche de la marge pour que les lettres restent alignées.

```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; }
}
```

La ponctuation suspendue sur le web. La prise en charge de `hanging-punctuation` par les navigateurs est limitée : vérifiez sur [caniuse](https://caniuse.com/css-hanging-punctuation) et gardez le retrait négatif comme solution de repli. Dans un outil de design, décalez simplement le guillemet vers la gauche.

Un post citation en portrait avec une courte citation en grands caractères à empattements et une petite attribution

Portrait : la citation en grand et centrée, l’attribution en petit dessous.

Une version carrée du même post citation sur le même fond

Carré : la même citation sur moins de lignes, pour rester tout aussi grande.

## Comment attribuer proprement une citation

L’attribution doit être facile à trouver et assez discrète pour ne pas concurrencer la citation. Placez le nom sur sa propre ligne, nettement plus petit que la citation, dans une autre graisse ou en capitales avec un peu d’interlettrage (voyez [l’espacement des lettres](https://gradiently.design/fr/guide/letter-spacing)). Aucune ponctuation n’est nécessaire avant le nom : le retour à la ligne et le changement de taille disent déjà qui a parlé.

| Élément | Traitement | Exemple |
| --- | --- | --- |
| Citation | Grande, en romain ou en italique | « Faites ce qui vous manque. » |
| Nom | Petit, graisse moyenne ou capitales | Le nom complet de l’auteur |
| Source | Encore plus petite, plus légère | Carnet d’atelier, 2026 |

Trois paliers de taille et de graisse, pour que l’œil lise d’abord la citation, puis qui l’a dite, puis où.

## Des fonds pour les posts citation

Si la plupart des posts citation se ressemblent, c’est à cause du fond : une montagne à l’aube, une plage, un café flou. Ces images sont partagées par des milliers de comptes et ne disent rien de vous. Un dégradé ou une texture discrète dans vos propres couleurs fait l’inverse. Il laisse de la place aux mots, il est reconnaissable comme le vôtre, et il garde le regard du lecteur sur la citation.

- Papier et encre: `linear-gradient(170deg, #f7f1e8 0%, #efe3d0 60%, #e2cfb3 100%)`
- Lecture de nuit: `linear-gradient(170deg, #0d1321 0%, #1d2d44 60%, #3e5c76 100%)`
- Aube douce: `linear-gradient(170deg, #fde2e4 0%, #f6d5e8 50%, #d7d3f5 100%)`
- Brun à la bougie: `radial-gradient(ellipse at 50% 40%, #3a2a1e 0%, #1f1610 70%, #120d09 100%)`

Quatre fonds discrets pour les citations. Chacun garde une zone calme et uniforme au milieu, là où vont les mots. Associez les deux clairs à une encre presque noire et les deux sombres à un blanc cassé chaud.

Gardez la partie la plus calme et la plus uniforme du fond derrière les mots, et vérifiez le contraste à cet endroit. [Le texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) explique comment choisir l’encre selon la luminosité pour que la citation reste lisible sur toute la surface.

## Faire de vos citations une série reconnaissable

Un post citation est un joli moment. Vingt dans la même mise en page deviennent un format que l’on reconnaît d’un bout à l’autre du fil, et une série de citations est l’un des moyens les plus simples de donner du rythme à une grille, comme le décrit [l’esthétique de la grille Instagram](https://gradiently.design/fr/guide/instagram-grid-aesthetic).

1. **Fixez la mise en page** Même police, même gamme de tailles, même position pour la citation et le nom, à chaque fois.
2. **Fixez la famille de fonds** Une seule matière ou famille de dégradés, légèrement variée d’un post à l’autre.
3. **Donnez-lui un nom ou un numéro** Une petite étiquette comme *La pensée du jeudi* ou *N° 12* transforme des posts isolés en série.
4. **Constituez une réserve** Rassemblez les citations vérifiées dans une liste avec leurs sources, pour que chaque nouveau post prenne quelques minutes.

Dans Gradiently, un modèle de citation peut porter n’importe quel Mark, et le Mark déplace sa zone la plus calme derrière les mots pour que la citation se lise sans cadre ni ombre. Réserver un Mark fait de ce fond le vôtre, et à vous seul.

## FAQ

### Quelle police pour un post citation ?

Une police à empattements avec une belle italique convient aux citations réfléchies, et une linéale affirmée aux phrases courtes et percutantes. Choisissez-en une qui a du caractère et composez-la en grand.

### Quelle longueur pour une citation sur un post ?

Environ 8 à 20 mots, c’est l’idéal. Les citations plus longues obligent à réduire le texte ; déplacez le reste dans la légende.

### Comment attribuer une citation sur un post ?

Placez le nom sur sa propre ligne, nettement plus petit que la citation, et la source encore plus petite. Un retour à la ligne et un changement de taille suffisent ; aucune ponctuation supplémentaire n’est nécessaire.

### Pourquoi mes posts citation paraissent-ils génériques ?

Le plus souvent à cause du fond. Les photos de paysages de banque d’images sont utilisées par des milliers de comptes ; un dégradé ou une texture discrète dans vos propres couleurs rend vos citations reconnaissables.