Polices de carrousel, taille du texte et contraste

Quelle taille de police pour le texte d’un carrousel ?

Concevez pour le téléphone, pas pour votre écran d’ordinateur. Un téléphone affiche un slide de 1080 px sur environ 360 points de large, un tiers de sa largeur en pixels (les grands téléphones l’affichent un peu plus large). Chaque taille que vous réglez sur le slide finit donc environ trois fois plus petite sur l’écran où on la lit.

Les recommandations de design d’Apple fixent le plus petit texte sur un iPhone à 11 points et la taille de lecture par défaut à 17 points. Multipliez par trois et vous avez les chiffres pour un slide de 1080 px : environ 33 px au minimum pour tout ce qui doit être lu, et environ 51 px pour un texte courant confortable. Le vérificateur de PDF LinkedIn gratuit d’aiCarousels signale le texte sous environ 24 px comme difficile à lire sur un téléphone : voyez-y le plancher pour les petites mentions comme un numéro de page ou votre pseudo, pas une taille pour des phrases.

Tailles de texte sur un slide de 1080 px, et ce qu’elles deviennent sur un téléphone

Tailles du slide divisées par trois : un téléphone qui affiche le slide sur 360 points de large. Les points d’écran sont l’unité d’Apple, environ un pixel CSS chacun ; le WCAG mesure le grand texte en points d’impression, et ses 18 pt en font environ 24. La dernière colonne est affichée à cette taille à l’écran. Tailles d’Apple : Human Interface Guidelines, Typography, et UI Design Dos and Don’ts.

Vous travaillez sur un format plus grand ? Appliquez la même échelle : à 2 160 px de large, doublez chaque chiffre. Une police fine ou condensée demande plus que ces tailles, pas moins ; les recommandations d’Apple conseillent de viser plus grand quand une police personnalisée a une graisse fine.

Les formats de carrousel courants font tous 1080 px de large (1080 × 1350 pour LinkedIn et Instagram en 4:5, 1080 × 1440 pour Instagram en 3:4, 1080 × 1920 pour TikTok) : ces tailles fonctionnent donc sur toutes les plateformes. Les formats exacts de chaque app sont dans les tailles de carrousel sur chaque plateforme.

Quelles polices conviennent le mieux aux carrousels ?

La meilleure police de carrousel est celle qu’on ne remarque pas en lisant. Quelques règles valables sur toutes les plateformes :

• Deux polices suffisent. Une pour les titres, une pour tout le reste. Utilisez la taille et la graisse pour le reste de la hiérarchie, pas une troisième police.
• Laissez la police des titres porter la personnalité. Une serif, une grotesque épaisse ou une display condensée fonctionne pour quelques grands mots.
• Gardez une police de texte simple. Des lettres ouvertes, une hauteur d’x généreuse (la hauteur des minuscules) et une graisse normale solide. La plupart des sans serif nettes conviennent.
• Évitez les graisses fines et légères en petite taille. Les recommandations d’Apple préviennent que les graisses Ultralight, Thin et Light sont difficiles à voir, surtout quand le texte est petit.
• Réservez les manuscrites et les majuscules à quelques mots. Une police manuscrite ou une ligne en majuscules se lit plus lentement que des minuscules. Bien pour un titre court, fatigant pour un paragraphe.
• Gardez les mêmes sur chaque slide, et sur chaque carrousel. Les gens apprennent à reconnaître votre style, et un kit de marque conserve les polices et les couleurs pour chaque nouveau carrousel.

Des associations de polices qui tiennent sur un téléphone

Associations tirées du générateur d’associations de polices gratuit. Toutes sont des Google Fonts, libres d’usage commercial.

Quel contraste faut-il pour le texte d’un carrousel ?

Le contraste est la différence de luminosité entre le texte et ce qu’il y a derrière, exprimée par un rapport de 1:1 (aucun) à 21:1 (noir sur blanc). La norme d’accessibilité du web, les WCAG 2.2, demande au moins 4,5:1 pour le texte, et 3:1 pour le grand texte : 18 points, ou 14 points en gras. Les WCAG précisent que la règle s’applique aussi aux images de texte, et chaque slide de carrousel en est une. Seuls les logos et le texte accessoire en sont exemptés : des mots purement décoratifs, ou qui figurent par hasard dans une photo. Le titre et le texte courant d’un slide ne sont ni l’un ni l’autre.

Les WCAG situent 18 points d’impression à environ 24 px à l’écran, les 24 points d’écran du tableau ci-dessus. Sur un slide qu’un téléphone affiche au tiers de sa taille, cela fait environ 72 px (ou environ 56 px en gras). Les titres de cette taille peuvent donc se contenter de 3:1. Tout ce qui est plus petit, y compris votre texte courant, demande 4,5:1.

Exemples de contraste pour les couleurs de carrousel

Rapports calculés avec la formule du WCAG pour ces couleurs exactes. L’orange montre la correction habituelle : gardez la couleur, changez le texte posé dessus.

• Le texte sur une photo change de contraste d’une lettre à l’autre. Posez les mots sur un aplat, ou assombrissez la photo derrière eux, et vérifiez le point le plus clair derrière le texte.
• Les couleurs de marque échouent souvent comme couleurs de texte. Utilisez-les pour les fonds, les formes et un mot d’accent, et mettez le texte dans votre neutre foncé ou clair.
• Gardez de la marge. 4,5:1 est le minimum sur un bon écran. On lit les carrousels au soleil, avec la luminosité baissée. Un rapport plus élevé ne coûte rien.

Combien de texte mettre sur un slide de carrousel ?

Moins que vous ne le pensez. Si les mots ne tiennent pas aux tailles ci-dessus, le slide en contient trop.

• Une idée par slide. Un titre qui fait passer le message, et une ou deux lignes qui l’appuient.
• Une couverture courte. 12 mots ou moins, c’est l’objectif que la vérification Prêt à publier d’aiCarousels applique au premier slide.
• Divisez, ne rétrécissez pas. Quand un slide ressemble à un paragraphe, faites-en deux. La plupart des plateformes vous laissent de la place : Instagram en accepte jusqu’à 20.
• Des listes courtes. Quelques éléments par slide, chacun sur une ligne.

Dans aiCarousels, vous pouvez le régler avant que quoi que ce soit soit écrit : Plus d’options › Mots par slide propose Auto, Percutant (le moins de mots), Équilibré et Détaillé. Pendant que vous modifiez, le texte qui ne tient pas à une taille lisible reçoit une étiquette rouge Trop long pour cette zone au lieu de rétrécir, et Raccourcir pour tenir le raccourcit avec votre ton. C’est l’ajustement intelligent du texte. Ou passez le slide sur une mise en page plus spacieuse : vos mots suivent.

Le gras Unicode pose-t-il problème aux lecteurs d’écran ?

Tout dépend d’où se trouve le gras.

• Sur un slide : le gras est la graisse grasse de la police elle-même, dessinée dans l’image. Il apparaît de la même façon pour tous ceux qui le voient. Aucun problème.
• Dans une légende : le « gras » que vous collez depuis un formateur de texte n’est pas du gras du tout. C’est un autre jeu de caractères, les Mathematical Alphanumeric Symbols (de U+1D400 à U+1D7FF), conçus pour les mathématiques. Unicode recommande de ne pas les utiliser à la place d’une vraie mise en forme. Les lecteurs d’écran peuvent les ignorer ou lire quelque chose comme « mathematical sans-serif script t », comme l’explique l’association Scope.

Limitez donc les lettres stylisées à quelques mots, et jamais sur un nom, un hashtag ou la phrase que les gens doivent comprendre. Comment faire sur chaque app : voir le gras sur LinkedIn et le formateur de texte Instagram.

Les polices et les tailles de texte changent-elles sur LinkedIn, Instagram et TikTok ?

Les tailles ci-dessus valent partout, car les slides font tous 1080 px de large. Ce qui change, c’est ce qui vient par-dessus :

• TikTok et les slides 9:16 : les boutons de l’app et la légende recouvrent les bords du slide. Gardez les mots à distance. aiCarousels dessine ces zones quand vous activez Afficher les zones de sécurité.
• Instagram : le compteur de slides se trouve en haut à droite et les points sous l’image. Laissez une marge sur les bords, et rédigez un texte alternatif pour chaque slide.
• LinkedIn : le carrousel est un document PDF. Le format de page, la couverture et le PDF lui-même sont traités dans conseils de design et caractéristiques des carrousels LinkedIn.

Un exemple : un carrousel construit selon ces règles

Six slides en 4:5. De grands titres, une ligne de texte courant chacun, foncé sur clair, et une seule association de polices de la couverture au dernier slide.

Comment régler les polices, la taille du texte et le contraste dans aiCarousels