Effet texte contour : des lettres creuses qui se lisent

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.

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 en proposent d’autres.

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 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.
• 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.

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 donne les détails.

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

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é 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.

1. 1

   Choisissez le mot

   Un ou deux mots qui portent le message, jamais une phrase.

2. 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. 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. 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. 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.