# Effet texte contour : des lettres creuses qui se lisent

[Canonical HTML page](https://gradiently.design/fr/guide/outline-text)

Les lettres creuses font sensation sur une affiche, mais disparaissent sur un téléphone plus souvent que tout autre effet. Voici comment choisir police, trait et mise en page pour qu’elles tiennent, avec un CSS qui marche partout.

## The short version

- L’effet texte contour ne dessine que le bord de chaque lettre et laisse l’intérieur creux, pour que le fond transparaisse.
- Le texte contour se lit mieux en sans serif ou en slab bien grasse aux formes ouvertes, en grand corps, avec un trait d’environ 2 à 4 % de la taille de la police.
- Associer un mot en contour à un mot plein donne au lecteur un point d’appui et fait du contour un rythme plutôt que tout le message.
- En CSS, le texte contour se fait avec -webkit-text-stroke et une couleur transparente, ce que prennent en charge tous les navigateurs majeurs.
- Évitez de détourer du petit texte, des graisses fines ou des polices script : les traits fins sont la première chose qu’un écran de téléphone perd.

L’**effet texte contour** ne montre que le bord de chaque lettre, l’intérieur restant creux pour laisser voir le fond. Il se lit quand trois conditions sont réunies : une police grasse aux formes ouvertes, un trait assez épais pour passer pour une ligne (environ 2 à 4 % de la taille de la police), et un grand corps sur un fond calme. La mise en page la plus fiable associe un mot plein et un mot en contour, pour que l’œil ait d’abord quelque chose de ferme à lire.

## Pourquoi le texte contour est difficile à lire

Nous reconnaissons les lettres à leurs formes pleines. Un contour retire cette masse et laisse deux lignes fines par trait, un bord extérieur et un bord intérieur. En grand, l’œil comble la forme. En petit, ou avec un trait filiforme, les deux lignes se brouillent ou se perdent dans le fond. Un fond chargé aggrave tout, car l’intérieur creux laisse voir la moindre texture.

### Échoue

- Graisses légères ou normales
- Traits filiformes sous 1 % de la taille
- Polices script ou serif très contrastées
- Phrases entières en contour
- Petit texte sous 60 px environ sur un post
- Photo détaillée visible à travers les lettres

### Tient

- Graisses noires, grasses ou extra grasses
- Traits d’environ 2 à 4 % de la taille
- Sans serif, slab ou grotesques robustes
- Un ou deux mots, le reste plein
- Tailles de titre, 120 px et plus sur un post
- Un dégradé calme ou une couleur unie derrière

## Choisir la police et le trait

Commencez par la graisse. Une police noire ou extra grasse a des traits larges, donc son contour décrit encore une forme nette. Les lettres ouvertes aident aussi : les contreformes rondes du O, du A et du e restent visibles au lieu de se refermer. Des polices comme Archivo Black, Anton ou une grotesque grasse sont de bons points de départ ; [les polices grasses](https://gradiently.design/fr/guide/bold-fonts) en proposent d’autres.

| Taille de police | Épaisseur du trait | Usage |
| --- | --- | --- |
| 60 px | 2 px | Le minimum pour un mot creux, et seulement sur fond uni |
| 120 px | 3 à 4 px | Titres de posts sociaux de 1080 px de large |
| 200 px | 5 à 7 px | Grands mots seuls et lignes d’affiche |
| 400 px | 10 à 14 px | Mots géants en arrière-plan et bannières |

Épaisseurs de trait d’environ 2 à 4 % de la taille de police. Allez plus épais sur les graisses légères ; plus fin seulement si les lettres commencent à s’empâter.

La couleur compte autant que l’épaisseur. Un trait clair sur fond sombre se lit plus facilement qu’un trait sombre sur fond clair, car les lignes claires semblent légèrement s’étaler. Prenez la couleur du trait dans la zone la plus claire ou la plus sombre du fond pour qu’elle fasse partie de la création. Si le fond est un dégradé, vérifiez le trait là où le fond est le plus proche de sa couleur : c’est là que le contour disparaîtra en premier.

## Les mises en page où le texte contour fonctionne

- **Duo plein et creux** : *Summer* en plein, *Sessions* en contour. Le mot plein sert d’ancre, le contour apporte du rythme.
- **Mot répété** : le même mot empilé trois ou quatre fois, un plein et les autres en contour, pour une impression d’écho ou de mouvement. [Les effets de texte rétro](https://gradiently.design/fr/guide/retro-text-effect) abordent les looks voisins du double et de la traînée.
- **Mot d’arrière-plan** : un énorme mot en contour derrière un titre plus petit et plein, qui fait texture plutôt que texte. Pour de la profondeur plutôt que du creux, voyez l’[effet texte 3D](https://gradiently.design/fr/guide/3d-text-effect).
- **Contour au survol ou dans un second état** : sur le web, un bouton ou un lien creux qui se remplit quand on le sélectionne.

Un post en portrait avec le mot Sessions très grand et un petit surtitre Summer au-dessus

Un seul grand mot, la forme qui convient au lettrage contour : court et gras, avec de petits détails pleins dessous.

Une story verticale pour une série de concerts d’été avec le mot Sessions en titre

Le même mot sur une story. Le cadre vertical laisse la place de le répéter dans la page, une copie pleine et les autres creuses.

## Comment faire du texte contour en CSS

La propriété s’appelle `-webkit-text-stroke`. Malgré son préfixe, elle fonctionne dans tous les navigateurs majeurs et fait partie du standard de compatibilité web. Mettez la couleur du texte en transparent pour un mot creux, ou gardez un remplissage pour une lettre pleine avec un bord. La [référence MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke) donne les détails.

```css
.outline {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 1;
  color: #fafaf9; /* fallback: solid letters */
}

@supports (-webkit-text-stroke: 1px black) {
  .outline {
    color: transparent;
    -webkit-text-stroke: 0.03em #fafaf9; /* about 3% of the size */
  }
}

/* Solid and hollow pair */
.outline-pair .solid { color: #fafaf9; }
.outline-pair .hollow {
  color: transparent;
  -webkit-text-stroke: 0.03em #fafaf9;
}
```

Un trait en `em` suit la taille de la police. Le bloc `@supports` garde des lettres pleines là où la propriété n’existe pas.

> **Le trait mord sur la lettre** Le CSS centre le trait sur le bord de la lettre : la moitié tombe donc à l’intérieur. Un trait épais sur un mot rempli l’amincit et peut fermer les petites contreformes. En SVG, `paint-order: stroke` dessine le trait derrière le remplissage et évite ce défaut.

Les lecteurs d’écran lisent normalement le texte contour, car c’est toujours du vrai texte. Gardez-le ainsi : n’aplatissez pas vos titres en contour en images sur un site web. Reste le risque du contraste, car les outils mesurent la couleur du texte, ici transparente. Vérifiez le trait contre le fond à l’œil et avec un vérificateur de contraste sur la couleur du trait. [Contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility) détaille les ratios.

## Trait extérieur et inline : deux styles de lettrage voisins

Le lettrage contour a des cousins qui gardent davantage de la forme pleine. Un **trait extérieur** dessine une ligne autour d’une lettre pleine et la détache du fond comme un bord d’autocollant. Un **inline** creuse une fine ligne à l’intérieur de chaque trait, le look des caractères d’affichage gravés et victoriens, et de bien des enseignes. Tous deux se lisent plus facilement qu’un mot entièrement creux : ils conviennent quand les mots doivent tenir en plus petit. Pour toute la famille de traitements, voyez les [effets de texte](https://gradiently.design/fr/guide/text-effects).

1. **Choisissez le mot** Un ou deux mots qui portent le message, jamais une phrase.
2. **Mettez-le en gras et en grand** Une graisse noire en taille de titre. Le lettrage contour n’est pas fait pour le texte courant.
3. **Choisissez creux, trait extérieur ou inline** Creux pour le drame, trait extérieur pour détacher un mot d’un fond chargé, inline pour un esprit artisanal d’enseigne.
4. **Prenez la couleur dans le fond** Utilisez sa teinte la plus claire ou la plus sombre pour que le trait appartienne à la création.
5. **Vérifiez sur un téléphone** Regardez le post à sa taille réelle. Si le contour scintille ou disparaît, épaississez le trait ou remplissez le mot.

Les traitements de Lettrage de Gradiently couvrent cette famille sans construire de calques à la main : Inline creuse une ligne dans chaque lettre, Double dessine deux fois les lettres ouvertes, Traînée laisse des contours en traînée et Contour entoure les mots de courbes de niveau. Comme le Mark derrière la création déplace sa zone la plus calme derrière les mots, un titre creux ou en inline obtient le fond stable dont il a besoin. Le lettrage en dégradé est une technique à part, traitée dans [le texte dégradé en CSS](https://gradiently.design/fr/guide/css-gradient-text).

## FAQ

### Comment faire du texte contour en CSS ?

Appliquez `color: transparent` et `-webkit-text-stroke: 0.03em #ffffff` au texte. La propriété préfixée fonctionne dans tous les navigateurs majeurs.

### Quelle police choisir pour du texte contour ?

Une sans serif ou une slab grasse aux formes ouvertes, comme Archivo Black ou Anton. Les graisses fines et les scripts s’effondrent une fois détourés.

### Quelle épaisseur donner au contour d’un texte ?

Environ 2 à 4 % de la taille de la police : 3 à 4 px pour un titre de 120 px.

### Le texte contour est-il accessible ?

Les lecteurs d’écran le lisent normalement, mais le contraste peut faire défaut. Réservez-le aux grands mots et vérifiez la couleur du trait contre le fond.