Faire lire — dans le bon ordre, et en une seconde
Un visuel réseau social n’est pas une image : c’est un message posé sur une image. Cette demi-journée est celle du texte — et c’est elle qui fait la différence entre un joli fond et un visuel qui fonctionne.
L’outil Texte : deux façons d’écrire
Choisir entre texte libre et bloc de texte, et savoir pourquoiT active l'outil Texte. Ensuite, deux gestes différents donnent deux objets différents — et c'est une vraie source de galère quand on l'ignore.
| Geste | Ce qu'on obtient | Comportement |
|---|---|---|
| Clic simple | Un texte libre | La boîte grandit avec le texte. Jamais de retour à la ligne automatique. |
| Clic-glissé | Un bloc de texte | Largeur fixe. Le texte revient à la ligne tout seul. Ce qu'il faut pour un paragraphe. |
La règle simple. Une accroche de deux mots : clic simple. Un paragraphe, une mention légale, un texte qui peut s'allonger : clic-glissé. Dans le panneau Design, section Mise en page, la rangée Redimensionnement (trois boutons : largeur automatique, hauteur automatique, taille fixe) permet de passer de l'un à l'autre après coup.
Pour modifier un texte existant : double-clic dessus. Pour en sortir : Échap.
- Appuie sur T.
- Clic simple sur ta frame, puis tape ton texte : la boîte grandit à mesure que tu écris.
- Échap pour sortir du texte, puis T à nouveau.
- Cette fois clique-glisse pour dessiner un rectangle avant de taper : le texte revient à la ligne tout seul dans cette largeur.
- Pour modifier un texte existant : double-clic dessus. Pour en sortir : Échap.
- Pour passer de l’un à l’autre après coup : panneau Design, section Mise en page, rangée Redimensionnement : largeur automatique, hauteur automatique ou taille fixe.
Police, corps, interligne, interlettrage
Régler un texte correctement — les quatre réglages qui comptent
| Réglage | Nom à l'écran | Ce qu'il fait | Le bon réglage |
|---|---|---|---|
| Corps | Taille de police (Size) | La taille du texte, en px | Sur un 1080 : accroche 80–110, texte 26–32, mention 18–20 |
| Interligne | Hauteur de ligne (Line height) | L'espace entre deux lignes | 110 % pour un titre, 140 % pour un paragraphe |
| Interlettrage | Espacement des lettres (Letter spacing) | L'espace entre les lettres | −1 à −3 % sur un gros titre, 0 ailleurs |
| Graisse | Graisse (Weight) | L'épaisseur du trait | Deux graisses maximum par visuel |
L'interligne par défaut de Figma est « Auto ». C'est acceptable pour du texte courant, et mauvais pour un gros titre : les lignes flottent. Sur une accroche de 96 px, mets 104 (soit ≈ 108 %). C'est le réglage qui, à lui seul, fait passer un visuel d'amateur à propre.
Choisir une police quand on n’y connaît rien
Figma donne accès à toute la bibliothèque Google Fonts, gratuite et utilisable commercialement. Trois combinaisons qui marchent toujours :
| Titres | Textes | Registre |
|---|---|---|
| Poppins SemiBold | Inter Regular | Moderne, tech, commercial. Le choix de ce cours. |
| Montserrat Bold | Open Sans Regular | Institutionnel, rassurant |
| Playfair Display Bold | Lato Regular | Haut de gamme, mode, hôtellerie |
Deux polices maximum. Une pour les titres, une pour les textes. Un visuel à trois polices est un visuel raté, sans exception. Et vérifie toujours la licence d'une police : toutes les polices de Google Fonts sont libres, la plupart des autres ne le sont pas.
- Sélectionne ton texte avec V — un simple clic suffit, inutile d’entrer dedans.
- Panneau Design à droite, section Typographie. Le premier champ, Famille de polices, est la police : clique dessus et tape « Poppins ».
- En dessous à gauche, la graisse (Regular, Medium, SemiBold, Bold). Choisis SemiBold.
- À droite de la graisse, la taille de police (le corps) en pixels : tape
96. - Le champ suivant, Hauteur de ligne, est l’interligne. Il affiche « Auto » : remplace par
104. - Le champ d’après, Espacement des lettres, est l’interlettrage : tape
-2%. - Remets l’interligne sur « Auto », regarde, puis reviens à 104. C’est ce seul réglage qui fait passer un titre d’amateur à propre.
La hiérarchie de lecture
Faire lire dans le bon ordre, en moins d’une secondeUn visuel réseau social est vu environ une seconde dans un fil. Il ne doit pas tout dire : il doit faire lire une chose, puis donner envie de lire la suivante.
| Niveau | Rôle | Taille relative | Exemple Datashop |
|---|---|---|---|
| 1 · Accroche | Ce qu'on lit malgré soi | La plus grosse — 3 à 4 fois le corps | LES JOURS DATA |
| 2 · Message | Ce qu'on lit si l'accroche a accroché | 1,3 à 1,6 fois le corps | −20 % sur toute la sélection écrans |
| 3 · Précision | La date, le lieu, la condition | Le corps | Du 12 au 19 septembre |
| 4 · Action | Ce qu'on attend du lecteur | Petit, mais coloré et détaché | J'en profite |
| 5 · Mention | L'obligatoire, le légal, la marque | Le plus petit lisible — jamais sous 18 px sur un 1080 | Voir conditions en magasin · datashop.fr |
Le test des trois mètres. Recule de trois mètres de ton écran, ou réduis le zoom à 25 %. Si tu ne peux plus dire en une seconde de quoi parle le visuel, la hiérarchie est ratée. Ce test ne trompe jamais.
La règle d’échelle : ne pas hésiter
Le défaut de tous les débutants est de faire des accroches trop petites. Entre deux niveaux, il faut un écart net : 96 px et 28 px se distinguent ; 40 px et 32 px se ressemblent, et le visuel devient une bouillie grise.
✗ Sans hiérarchie
Quatre textes entre 32 et 44 px, tous en gras, tous en blanc. L'œil ne sait pas par où commencer, et passe au post suivant.✓ Avec hiérarchie
96 px pour l'accroche, 28 px pour le message, 20 px pour la mention. Un seul élément coloré : le bouton. Lu en une seconde.Écrire lisible sur une image
La compétence la plus demandée, et la plus souvent ratéeDu texte blanc sur une photo claire est illisible. Du texte noir sur une photo sombre aussi. Quatre techniques règlent le problème — par ordre de qualité.
| Technique | Comment | Verdict |
|---|---|---|
| 1 · Le dégradé vers le transparent | Un rectangle noir en dégradé, opacité 0 % en haut → 85 % en bas, posé entre la photo et le texte | ✅ La bonne méthode. Invisible, et la photo reste visible. |
| 2 · Le bandeau plein | Un aplat de couleur derrière le texte | ✅ Franc et très lisible. Assumé graphiquement. |
| 3 · Le voile uniforme | Un rectangle noir à 35 % sur toute la photo | ⚠️ Fonctionne, mais éteint l'image entière. |
| 4 · L'ombre portée sur le texte | Effet d'ombre appliqué directement au texte | ❌ Fait daté et sale. À éviter. |
Atelier — le testeur de contraste
4,5:1, c'est quoi au juste ?
Change les deux couleurs, le rapport se recalcule. en directEssaie le Menthe #00D3A7
sur du blanc : c'est très joli, et c'est illisible. C'est exactement le
piège dans lequel tombe un visuel sur deux.
Le contraste, en chiffres. Une règle d'accessibilité que les professionnels appliquent : le rapport de contraste entre le texte et son fond doit être d'au moins 4,5:1 (3:1 pour un très gros texte). Le plugin Stark, dans Figma, le mesure pour toi. Ce n'est pas du confort : 20 % de tes lecteurs ont une vision imparfaite.
Ne mets jamais un texte sur la partie détaillée d'une photo. Cherche une zone calme — un ciel, un mur, un flou. Si la photo n'en a pas, change de photo ou assume le bandeau plein.
- Sélectionne ta photo et note sa position et sa taille dans le panneau Design.
- R, puis trace un rectangle qui recouvre exactement la photo.
- Dans le panneau des calques, vérifie qu’il est au-dessus de la photo et en dessous du texte. Sinon, fais-le glisser à la bonne place.
- Remplissage : clique sur le carré de couleur, puis choisis Linéaire en haut du sélecteur.
- Deux poignées apparaissent sur le canevas. Clique sur celle du haut et descends son opacité à 0 %.
- Clique sur la poignée du bas : mets-la en noir, opacité 85 %.
- Oriente l’axe du dégradé sur le canevas pour qu’il aille du bas vers le haut.
- Ton texte redevient lisible, et le haut de la photo reste intact.
Les styles de texte, et les dix fautes de débutant
Verrouiller l’échelle typographique, et reconnaître ce qui « fait amateur »Enregistrer l’échelle en styles de texte
Même principe que pour les couleurs. Sélectionne un texte réglé, puis dans la section Texte clique sur les quatre points › +. Nomme-le, et il devient réutilisable partout.
| Style | Réglage | Usage |
|---|---|---|
Accroche | Poppins SemiBold · 96 / 104 · −2 % | Le niveau 1 |
Sous-titre | Inter Medium · 40 / 52 | Le niveau 2 |
Corps | Inter Regular · 28 / 40 | Les niveaux 3 et 4 |
Mention légale | Inter Regular · 20 / 28 | Le niveau 5 |
Ces valeurs sont calibrées pour un 1080 × 1080. Sur la bannière 1200 × 628, l'accroche descend à environ 64 px : la surface est plus petite en hauteur. On adapte l'échelle au format, on ne la copie pas bêtement.
Les dix fautes qui se voient tout de suite
| # | La faute | Le correctif |
|---|---|---|
| 1 | Trois polices ou plus | Deux maximum, jamais plus |
| 2 | Accroche trop petite | Au moins 3 fois le corps du texte |
| 3 | Interligne « Auto » sur un gros titre | Régler à ≈ 108 % |
| 4 | Texte centré partout | Aligner à gauche : l'œil y revient plus vite |
| 5 | Texte collé au bord | Respecter la marge — 80 px sur un 1080 |
| 6 | Contraste insuffisant | Viser 4,5:1, vérifier avec Stark |
| 7 | TOUT EN CAPITALES sur une phrase entière | Capitales sur 3 mots maximum |
| 8 | Deux arrondis différents dans le même visuel | Une seule valeur |
| 9 | Une couleur hors charte « parce qu'elle est jolie » | La charte, rien que la charte |
| 10 | Photo étirée | Mode Remplir + recadrage, jamais d'étirement |
Fin de la demi-journée 3. Les quatre visuels portent leur message, avec une hiérarchie claire et un texte lisible. Passe la liste des dix fautes sur chacun avant de fermer : c'est plus rapide maintenant que vendredi.
- Sélectionne un texte déjà réglé — ton accroche en Poppins SemiBold 96/104, par exemple.
- Panneau Design, section Typographie : clique sur l’icône à quatre petits points (Appliquer des styles et des variables), à droite du titre de la section.
- Une fenêtre s’ouvre. Clique sur le +.
- Nomme le style
Accrocheet valide par Créer un style. - Recommence pour
Sous-titre,CorpsetMention légale. - Pour l’appliquer ailleurs : sélectionne un autre texte, rouvre les quatre points, clique sur le style voulu.
- Pour le modifier partout d’un coup : le ⋯ à droite du style dans la liste, change la valeur, valide.