# Texte en capitales : quand les majuscules aident ou nuisent

[Canonical HTML page](https://gradiently.design/fr/guide/all-caps-typography)

Les capitales donnent de l’autorité à une étiquette et du poids à un titre, mais transforment un paragraphe en mur. Où les majuscules ont leur place, quel espacement leur donner, comment les composer sur le web.

## The short version

- Le texte en capitales convient surtout aux étiquettes courtes, aux surtitres, aux boutons et aux titres de quelques mots.
- Les capitales ont toutes la même hauteur : un mot en majuscules perd le contour varié qui aide à le reconnaître vite.
- Les capitales demandent un espacement supplémentaire : environ 0,08em à 0,12em pour de petites étiquettes et 0,01em à 0,03em pour de grands titres.
- Sur le web, saisissez le texte en casse normale et appliquez les majuscules avec le CSS text-transform : copie, traduction et lecteurs d’écran reçoivent alors les mots naturels.
- Les longs passages, le texte courant et tout ce qui est déjà bruyant doivent rester en casse de phrase.

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.

Un post en portrait où le titre, la date et les détails sont tous en capitales et se disputent l’attention

Tout en capitales : rien ne ressort, car tout crie.

Le même post avec seulement la date en petites capitales, le titre et les détails en casse de phrase

Les capitales sont réservées au petit surtitre. Le titre et les détails se lisent plus vite en casse de phrase.

## 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

### À garder hors des capitales

- Texte courant et paragraphes
- Titres de plus de quatre mots environ
- Tous les intertitres d’une page à la fois
- Polices script et décoratives
- Messages qui doivent paraître calmes ou bienveillants
- Mentions légales et conditions

### Bien en capitales

- Surtitres et étiquettes
- Boutons et navigation
- Titres d’un à trois mots
- Sans serif et slab robustes
- Soldes, ouvertures et panneaux d’urgence
- En-têtes de tableaux et de graphiques

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](https://gradiently.design/fr/guide/title-case-vs-sentence-case) 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](https://gradiently.design/fr/guide/letter-spacing) explique l’approche en général ; pour les capitales, partez de ces valeurs.

| Usage | Taille | Espacement des lettres |
| --- | --- | --- |
| Petite étiquette ou surtitre | 11 à 13 px à l’écran, 28 à 32 px sur un post de 1080 px | 0,08em à 0,12em |
| Bouton ou navigation | 14 à 16 px | 0,04em à 0,08em |
| Sous-titre en capitales | 18 à 24 px | 0,04em à 0,06em |
| Grand titre en capitales | 48 px et plus | 0,01em à 0,03em |
| Mot d’affichage géant | 120 px et plus | 0 à 0,02em, vérifiez les paires à l’œil |

Valeurs de départ en em, pour que l’espacement suive la taille. Ajustez à l’œil selon votre police.

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](https://gradiently.design/fr/guide/tracking-vs-kerning) 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.

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

La fonctionnalité `case` recentre la ponctuation sur les capitales. `all-small-caps` offre une alternative plus discrète aux capitales complètes.

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](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) 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](https://gradiently.design/fr/guide/headline-fonts) robuste aide dans les deux cas. [La mise en page du texte des posts](https://gradiently.design/fr/guide/text-hierarchy-social) montre comment les niveaux s’articulent.

Une story verticale avec OUVERT en grandes capitales, un petit surtitre en capitales et une ligne de détail en casse de phrase

Deux mots qui marchent en capitales, avec les détails plus longs laissés en casse de phrase dessous.

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.

## FAQ

### Le texte en capitales est-il plus difficile à lire ?

Au-delà de quelques mots, oui. Les capitales ont une seule hauteur : les mots perdent leur contour reconnaissable et se lisent plus lentement.

### Quel espacement donner aux capitales ?

Environ 0,08em à 0,12em pour de petites étiquettes, 0,04em à 0,06em pour des sous-titres et 0,01em à 0,03em pour de grands titres.

### Faut-il saisir en capitales ou utiliser text-transform uppercase ?

Utilisez `text-transform: uppercase` sur un texte en casse normale. Copie, traduction et lecteurs d’écran reçoivent alors les mots naturels.

### Les titres en capitales font-ils l’effet de cris ?

Les longs, oui. Un à trois mots en capitales paraissent assurés ; une phrase entière paraît crier.