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

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.

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 explique ce que chacune évoque en général, et l’association de polices 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.

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

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). Aucune ponctuation n’est nécessaire avant le nom : le retour à la ligne et le changement de taille disent déjà qui a parlé.

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.

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

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