Texte en capitales : quand les majuscules aident ou nuisent

Le texte en capitales aide quand il est court : un surtitre au-dessus d’un titre, une étiquette, un bouton, une date ou un titre de deux ou trois mots. Il nuit quand il s’allonge. Les capitales ont toutes la même hauteur : un mot en majuscules devient un simple rectangle au lieu d’une forme reconnaissable, et une phrase entière se lit plus lentement et passe pour des cris. Employées brièvement et avec un peu d’espacement en plus, les capitales apportent ordre et autorité ; employées pour tout, elles aplatissent la hiérarchie.

Pourquoi les capitales se lisent plus difficilement

Les minuscules ont des hampes (b, d, h, k) et des jambages (g, p, y). Ensemble, elles donnent à chaque mot un contour distinctif, que les lecteurs entraînés utilisent pour reconnaître les mots familiers sans les épeler. En capitales, chaque lettre tient entre les deux mêmes lignes. Le contour devient une boîte et le lecteur doit scruter chaque lettre. Sur deux ou trois mots, ce n’est pas grave. Sur un paragraphe, c’est fatigant.

Quand les capitales fonctionnent

• Surtitres et accroches : une petite catégorie ou une date au-dessus du titre, comme NOUVEAU ou ÉPISODE 12. Les capitales disent au lecteur qu’il s’agit d’une étiquette, pas du contenu.
• Navigation et boutons : des mots courts et faciles à balayer, où chaque élément est de même nature.
• Titres courts d’un à trois mots : SOLDES, OUVERT, COMPLET. La forme du bloc fait partie de la création.
• Logotypes et logos : beaucoup de logos forts sont composés en capitales, où le mot se voit comme une image fixe plutôt qu’il ne se lit.
• Étiquettes de données et en-têtes de tableau : de courts intitulés en capitales au-dessus des colonnes les distinguent des valeurs en dessous.

Quand les capitales nuisent

Les polices script méritent une alerte particulière : leurs capitales sont dessinées pour ouvrir les mots, pas pour s’aligner, et un mot en capitales script est souvent presque illisible. Le ton compte aussi. Les capitales sonnent fort, ce qui sert des soldes et dessert des excuses. Pour hésiter plus largement entre styles de casse dans les titres, casse de phrase ou casse de titre détaille les options plus discrètes.

Quel espacement donner aux capitales

Les polices sont espacées pour les minuscules. Des capitales côte à côte, avec leurs côtés droits et leurs formes larges, paraissent serrées à l’espacement par défaut. Ouvrir l’approche donne de l’air à chaque lettre et facilite la lecture du mot. Plus le texte est petit, plus il lui faut d’espace. L’espacement des lettres explique l’approche en général ; pour les capitales, partez de ces valeurs.

De grandes capitales peuvent aussi demander un crénage manuel sur les paires délicates comme AV, LT et TY, où l’écart par défaut paraît trop large. Approche et crénage explique la différence entre les deux réglages.

Utiliser text-transform uppercase en CSS

Écrivez les mots en casse normale dans votre HTML et appliquez les capitales avec le CSS. La copie, les résultats de recherche et les outils de traduction reçoivent alors un texte naturel, et vous évitez qu’un lecteur d’écran prenne un mot saisi en capitales pour un sigle et l’épelle. Vous pouvez aussi changer d’avis plus tard sans rien retaper.

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 600;
  /* Raise hyphens, brackets and colons to suit capitals, if the font has it */
  font-feature-settings: "case" 1;
}

/* Small capitals: lowercase letters drawn as smaller capitals */
.label {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}

Renseignez aussi l’attribut lang de la page. text-transform suit les règles de chaque langue, ce qui compte pour des mots comme le i pointé turc, et la référence MDN précise le traitement de chaque langue. Les libellés traduits sont souvent plus longs que l’anglais et les capitales les élargissent encore : laissez de la place dans les boutons et les onglets.

Les capitales sur les posts sociaux

Sur un téléphone, de petites capitales peuvent mieux tenir que de petites minuscules, car leurs formes sont plus simples. Les capitales conviennent donc aux petits détails d’un post : une date, un identifiant, un numéro de page de carrousel. Pour le titre, n’employez les capitales que s’il est très court ; sinon la casse de phrase se lit plus vite au moment où l’on survole un post. Une police de titre robuste aide dans les deux cas. La mise en page du texte des posts montre comment les niveaux s’articulent.

Dans Gradiently, le Designer écrit titres et détails pour vous et les met en page dans votre Mark ; chaque mot reste modifiable ensuite dans le Studio. L’encre automatique rend les petites étiquettes en capitales aussi lisibles que le titre, en choisissant un texte clair ou foncé pour chaque ligne dans la palette du Mark.