Générateur CSS text-stroke, gratuit

D'où vient le contour de texte CSS

L'idée de contourner un glyphe précède le CSS de plusieurs décennies ; elle est native au PostScript (Adobe, 1984) et a été reportée dans SVG 1.1 (Recommandation W3C, 2e édition, 16 août 2011), qui définit les attributs de peinture stroke, stroke-width, stroke-linecap et stroke-linejoin pour toute forme y compris <text>. CSS a obtenu sa propre version quand Apple a livré -webkit-text-stroke dans Safari 3 en juin 2007, aux côtés de -webkit-text-fill-color. La propriété n'a jamais été normalisée dans une spec W3C publiée ; elle vit dans l'Editor's Draft du module CSS Text Decoration Niveau 4 en tant que text-stroke non préfixé, mais en 2026 le nom non préfixé n'est toujours pas activé dans aucun navigateur. Firefox 49 (20 septembre 2016) et Edge 15 (5 avril 2017) ont tous deux ajouté -webkit-text-stroke comme alias de compatibilité web explicite pour gérer les pages qui n'utilisent que le nom préfixé WebKit. En production, écrivez le préfixe.

Trois façons de contourner du texte sur le web

Il y a plus d'une façon de dessiner un contour autour du texte. Le bon outil dépend de la largeur, du budget de lisibilité et de savoir si les glyphes sous-jacents doivent rester nets :

• -webkit-text-stroke, la propriété que ce générateur émet. Une ligne de CSS, composée par GPU, gratuite à n'importe quel framerate. Le contour est dessiné centré sur le contour du glyphe, moitié à l'intérieur et moitié à l'extérieur, ce qui signifie que les contours épais commencent à manger dans les formes des lettres.
• Le text-shadow à quatre directions, le repli universel qui fonctionne dans tous les navigateurs jusqu'à IE 10. text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; empile quatre ombres de 1 pixel dans chaque coin pour faire semblant d'un contour de 1 px. Défini dans le module CSS Text Decoration Niveau 3 (Candidate Recommendation W3C août 2019). Aux contours plus larges, les artefacts en escalier deviennent visibles ; huit ou seize directions peuvent les lisser au prix de plus d'ombres.
• SVG <text> avec paint-order: stroke fill;, la bonne réponse quand vous avez besoin d'un contour épais sans que l'encre saigne à l'intérieur de la lettre. La propriété paint-order dessine d'abord le contour, puis le remplissage par-dessus, donc le remplissage reste à sa pleine largeur annoncée.

Accessibilité : logique de contraste, non au texte courant, oui au décoratif

Le critère de succès WCAG 2.1 1.4.3 « Contraste (Minimum) » (Recommandation W3C 5 juin 2018) exige un contraste de 4,5:1 pour le texte normal et 3:1 pour le grand texte (18 pt / 14 pt gras). Avec un contour appliqué, le bord visuellement dominant du glyphe est la couleur du contour, donc la vérification de contraste doit comparer cette couleur au fond, pas le remplissage. Échec courant : un logo jaune sur blanc avec un mince contour noir passe si vous vérifiez noir vs blanc, mais le corps de la lettre est jaune sur blanc et se lit mal aux petites tailles. Les contours détruisent la lisibilité sur le texte courant. Sous 16 px de taille de police, un contour de 1 px remplit 10 à 15 pour cent de l'intérieur du glyphe et un contour de 2 px peut fermer les contre-formes (les trous dans « a », « e », « o »). Réservez le contour de texte aux titres, à la typographie d'affichage et à un usage décoratif ; ne l'appliquez jamais au texte de paragraphe sans tests explicites à chaque point de rupture.

Quand un contour de texte est le bon outil

• Titres de bande dessinée et d'interface de jeu : le look classique Marvel / Nintendo contour noir épais sur remplissage clair.
• Filigranes et superpositions décoratives : contour semi-transparent seulement, pas de remplissage, posé sur les images.
• Graphiques de tutoriel, captures d'écran, encadrés où le texte doit ressortir sur un fond inconnu.
• Boutons « fantômes » où le texte du bouton utilise un contour et un remplissage transparent pour se sentir assorti en poids au bouton bordé lui-même.
• Titres en contour uniquement dans le design éditorial, le look « lettre creuse » qui était à la mode à la fin des années 2010.

Erreurs courantes

• Oublier le préfixe -webkit-. Le text-stroke non préfixé n'est qu'au stade Editor's Draft et n'est pas livré. Toujours écrire la forme préfixée en production.
• Essayer d'animer -webkit-text-stroke-width. Ce n'est pas sur la liste des propriétés CSS animables. Les transitions vont « sauter » plutôt qu'interpoler. Animez text-shadow ou utilisez SVG quand le mouvement est requis.
• Appliquer un contour au petit texte. Sous 16 px le contour remplit l'intérieur du glyphe et ferme les contre-formes. Définissez une garde de taille de police minimale avec une media query.
• Combiner des contours larges avec un letter-spacing serré. Le contour traverse entre les glyphes adjacents et produit des taches grises là où les formes se touchent.
• Compter la couleur du contour comme la « couleur du texte » dans les vérifications de contraste. Le remplissage et le contour doivent tous deux passer WCAG 1.4.3 contre le fond.
• Ne pas tester les feuilles de style d'impression. Les contours peuvent rendre dramatiquement plus épais ou plus minces à l'impression, surtout sur les navigateurs qui réduisent l'échelle de la gamme de couleurs pour la sortie PDF.

Plus de questions fréquentes

Pourquoi mon contour semble-t-il plus épais sur un écran Retina que sur un moniteur 1080p ?

Il ne l'est pas, en pixels CSS. Un contour de 2px est exactement 2 pixels CSS sur les deux. Ce qui change est la netteté perçue : sur un écran Retina (DPR 2×), un contour de 2 pixels CSS fait 4 pixels d'appareil et s'anticrénelle proprement. Sur un écran 1×, 2 pixels d'appareil donnent un bord nettement plus flou. Si vous avez besoin d'un filet qui s'aligne sur un pixel d'appareil sur Retina, écrivez 0.5px ; les navigateurs arrondissent à un pixel d'appareil sur les écrans à DPR élevé.

Puis-je avoir une couleur de contour différente pour chaque lettre ?

Pas avec une seule déclaration -webkit-text-stroke. Soit enveloppez chaque lettre dans un <span> et stylez individuellement, soit utilisez des éléments SVG <tspan> avec leur propre attribut stroke. Le pseudo-élément ::first-letter accepte text-stroke si vous avez seulement besoin que la première lettre diffère.

Quelle épaisseur de contour est trop épaisse ?

Un plafond pratique est d'environ 8 pour cent de la taille de la police. À 100 px de police, c'est 8 px de contour ; au-delà les lettres commencent à se chevaucher. Si vous voulez un visuel de contour plus épais, utilisez SVG <text> avec paint-order: stroke fill; pour que le remplissage reste à la largeur originale et que le contour ne s'étende que vers l'extérieur.

-webkit-text-stroke fonctionne-t-il sur les emoji ?

Sur les emoji en couleur (le défaut dans les navigateurs modernes), le contour s'applique à la silhouette extérieure du glyphe emoji. Le résultat est généralement subtil car l'emoji a déjà son propre contour et son ombrage. Pour les emoji noir et blanc (la variation de police text), le contour s'applique proprement comme n'importe quel autre glyphe.

Quelque chose est-il envoyé à un serveur ?

Non. Le texte que vous tapez dans l'aperçu, les couleurs que vous choisissez et le CSS généré sont tous traités dans le JavaScript de votre navigateur. Aucun appel réseau n'est effectué. Ouvrez l'onglet Réseau dans DevTools pour vérifier.