La typographie des posts pour réseaux sociaux : le guide pratique

Utilisez une sans serif nette, un titre entre 72 et 110 px sur un canevas de 1080 px, un texte de soutien de 40 à 48 px et rien de plus petit qu'environ 32 px. Ces chiffres sont notre recommandation, construite à partir du minimum de 11 pt d'Apple pour le texte iOS et de la façon dont une image de 1080 px est réduite sur un écran de téléphone.

À notre avis, la plupart des posts sociaux se lisent en faisant défiler du pouce, à bout de bras, en une ou deux secondes. La typographie n'a qu'un rôle : être reconnue instantanément. Ce guide est la page pivot de notre groupe typographie. Il vous donne une échelle typographique à copier, le calcul qui la sous-tend et un test de ce qui arrive à un titre à la taille réelle d'un téléphone.

Quelle taille font 1080 px sur un téléphone ?

Un iPhone 16 a un écran de 2556 par 1179 pixels. Un post de 1080 px de large qui occupe toute la largeur de l'écran est donc affiché avec à peu près autant de pixels que l'écran est large, si bien qu'un pixel de canevas correspond à peu près à un pixel d'appareil. Les directives d'Apple sont toutefois écrites en points, pas en pixels. En divisant la largeur de 1179 px par 3 (notre hypothèse de travail pour l'écran 3x), on obtient un écran d'environ 393 pt de large. En bref : 1 pt = 3 px d'appareil, donc 1 px de canevas correspond à environ 1 px d'appareil et 2,75 px de canevas à environ 1 pt.

La conversion que nous utilisons : 1080 / 393 = environ 2,75 px de canevas par point. Cela vaut quand le post occupe l'écran de bord à bord. Les fils ajoutent des marges et certaines surfaces affichent l'image plus petite : considérez donc 2,75 comme le meilleur cas et ajoutez une marge de sécurité.

Valeur Apple iOS	Points	px de canevas pour 1080 de large (x 2,75)
Taille de texte minimale	11	environ 30
Caption 1	12	environ 33
Footnote	13	environ 36
Default body	17	environ 47
Title 2	22	environ 61
Large Title	34	environ 94

Toutes les valeurs en points proviennent des styles de texte iOS d'Apple ; la colonne des pixels est notre propre arithmétique. Les conseils de design d'Apple citent eux aussi 11 pt comme le plus petit texte lisible.

Quelles tailles de police fonctionnent sur un post de 1080 px ?

Voici l'échelle que nous recommandons pour des canevas de 1080 px de large. C'est notre recommandation, pas une règle de plateforme. Aucun réseau social ne publie de taille de police minimale pour les images.

Rôle	Taille à 1080 px	Environ sur un téléphone	Graisse	Interligne
Titre	72 à 110 px (plancher 72)	26 à 40 pt	700 à 800	1,0 à 1,15
Sous-titre	48 à 60 px	17 à 22 pt	600	1,2
Texte de soutien	40 à 48 px	15 à 17,5 pt	400 à 500	1,3 à 1,5
Surtitre ou étiquette (capitales)	32 à 36 px	12 à 13 pt	600, espacement large	1,2
Mentions en petits caractères (jamais essentielles)	32 px minimum	12 pt	500	1,3

Trois règles sous-tendent le tableau. Tout ce que le lecteur doit comprendre reste à 40 px ou plus. Tout ce qui est en dessous de 32 px relève de la décoration, du texte légal ou d'un identifiant. Gardez le titre au moins 1,5 fois plus grand que le texte de soutien : 72 px sur 48 px est la paire la plus serrée de notre tableau, et à 110 px sur 40 px l'écart atteint environ 2,75 fois, si bien que la hiérarchie survit à un coup d'œil. Pour la mise en page autour de ces tailles, consultez notre page pilier sur les principes de mise en page. Le calcul derrière les planchers de 40 et 32 px, et la façon dont ils changent sur des canevas de 1200 et 1500 px, se trouve dans notre guide de la taille de police minimale pour les visuels de réseaux sociaux.

Quelles polices sont les plus faciles à lire en petite taille ?

Choisissez d'abord pour la lisibilité. Le Nielsen Norman Group distingue la légibilité de la lisibilité : la légibilité, c'est la capacité des gens à reconnaître physiquement les caractères, et elle dépend de la taille, du contraste et de la netteté de la police. Un post social met la légibilité à l'épreuve plus que presque tout autre support.

Nos recommandations :

• Une sans serif polyvalente à grande hauteur d'x (la hauteur des lettres minuscules) et aux formes de lettres ouvertes. Inter, Roboto et les familles sans du système conviennent toutes.
• Trois graisses au maximum : regular pour le corps, semibold pour les étiquettes, bold pour les titres.
• Évitez les graisses fines. Les directives d'Apple indiquent que Ultralight, Thin et Light sont difficiles à lire en petite taille.
• Réservez une serif ou une police d'affichage aux citations et aux titres éditoriaux, et testez-la à 390 px de large avant de vous engager.
• Gardez un crénage serré sur les grands textes et ouvert sur les petites capitales. Les titres de 90 px ou plus demandent en général un espacement des lettres légèrement négatif, et un surtitre de 32 px un espacement légèrement positif.

Le choix des polices est aussi une décision de marque : consignez donc l'association une bonne fois par écrit. Notre guide des chartes de marque pour petites équipes explique comment.

Que se passe-t-il quand le titre est trop long ?

C'est là qu'un canevas fixe pose problème. Voici un modèle, généré à partir de notre marque de démonstration AURORA, avec un titre réglé à 92 px dans une zone de 888 par 440 px. D'abord, un titre de deux mots.

Voici maintenant le même modèle avec un titre de 99 caractères.

Le moteur a réduit un peu la taille du texte (d'après notre mesure : de 92 px à environ 80 px) pour qu'il tienne au lieu de déborder. Dans Chikaboom, le designer fixe une taille idéale et un plancher (ce titre commence à 92 px avec un plancher de 56 px et autorise 5 lignes) ; si le texte ne tient toujours pas au plancher, il se termine par une ellipse. Personne dans l'équipe ne peut pousser le texte hors de la zone ni sous le plancher. C'est l'argument pratique en faveur des modèles verrouillés : les choix typographiques sont faits une fois par la personne qui les comprend.

Le titre long reste-t-il lisible à la taille d'un téléphone ?

Voici le même modèle et le même texte, générés nativement en 393 par 393 px, proche de la largeur d'un écran de téléphone. C'est un rendu neuf, pas une copie réduite de l'image de 1080, donc les retours à la ligne diffèrent.

Notre constat : le titre reste lisible. Sachez que le plancher de 56 px de ce modèle de démonstration est inférieur à notre propre recommandation de 72 px pour les titres : il équivaut à environ 20 pt sur un téléphone en pleine largeur (56 / 2,75), acceptable pour un titre long mais contre-exemple pour un titre court. Dans vos propres modèles, fixez le plancher des titres à 72 px ou plus. Les petites étiquettes sont les éléments les plus faibles : dans ce modèle, elles se situent près du plancher de 32 px que nous recommandons et, à 393 px, elles sont à peine lisibles ; considérez-les donc comme de la décoration. Faites cette vérification sur chaque modèle que vous livrez : générez-le à 393 px et lisez-le à bout de bras. Vous pouvez l'essayer vous-même dans la démo en direct.

Comment les règles WCAG s'appliquent-elles au texte dans les images ?

À notre avis, le contraste compte plus que toute règle de taille. Les WCAG sont écrites pour le contenu web et leur critère de contraste couvre les images de texte ; appliquer leurs ratios aux images sociales est notre recommandation, pas une exigence de plateforme. Elles exigent 4,5:1 pour le texte normal et 3:1 pour le texte grand, où grand signifie 18 pt ou plus, ou 14 pt gras ou plus (environ 24 px et 19 px en termes CSS). Notez que les WCAG ne fixent aucune taille de police minimale, seulement des seuils de contraste qui dépendent de la taille, et avertissent que les images de texte ne s'adaptent pas aussi bien que le texte réel. Pour approfondir les associations de couleurs, lisez notre guide du contraste des couleurs.

L'espacement est un cas différent. Le critère 1.4.12 cite un interligne de 1,5 fois la taille de la police, un espacement de paragraphe de 2 fois, un espacement des lettres de 0,12 em et un espacement des mots de 0,16 em, mais il demande que le contenu résiste quand les utilisateurs appliquent ces valeurs, pas que les designs les utilisent. Il ne peut pas s'appliquer à un PNG aplati : utilisez donc ces chiffres seulement comme référence. Nos recommandations d'interligne dans le tableau sont volontairement plus serrées pour les titres.

Comme les utilisateurs ne peuvent pas redimensionner le texte d'une image, mettez aussi le vrai message dans la légende et le texte alternatif.

Une liste de contrôle typographique avant de publier

• Titre de 72 px ou plus, tout l'essentiel à 40 px ou plus, rien en dessous de 32 px.
• Une sans serif, trois graisses au maximum, pas de graisses fines ou légères.
• Titre au moins 1,5x le texte de soutien (72 px sur 48 px dans le cas le plus serré).
• Contraste de 4,5:1 pour le petit texte, 3:1 pour le texte de 24 px (18 pt) ou plus au sens des WCAG. N'oubliez pas que le canevas de 1080 px est réduit : vérifiez la taille réelle.
• Titre testé à sa longueur maximale autorisée et à 393 px de large.
• Plancher fixé pour chaque zone de texte, afin qu'un texte plus long rétrécisse et se termine par une ellipse au lieu de déborder.
• Espacement des lettres resserré pour les tailles d'affichage et élargi pour les petites capitales.
• Texte à l'intérieur des zones de sécurité de la plateforme. Voir la référence complète des tailles et le guide des zones de sécurité des Stories et Reels.