Créer des effets de contour de texte avec CSS

Ajouter un contour à votre texte peut donner un aspect distinctif et moderne à vos titres et éléments graphiques. Ce tutoriel vous montrera deux méthodes principales en CSS pour y parvenir, en soulignant leurs avantages et inconvénients, et en vous guidant sur le choix des polices Google Fonts.

1. Introduction : Qu'est-ce que le Contour de Texte ?

Le contour de texte (ou "stroke") est un effet typographique qui ajoute une bordure colorée autour des lettres, laissant parfois le remplissage des lettres transparent ou d'une couleur différente. C'est un moyen efficace de faire ressortir votre texte, surtout pour les titres ou les éléments d'appel à l'action.

2. Méthode 1 : Utiliser text-stroke (La Propriété Native)

La propriété text-stroke est la méthode la plus directe pour ajouter un contour en CSS.

Comprendre text-stroke

La propriété text-stroke (ou -webkit-text-stroke pour une meilleure compatibilité navigateur) est un raccourci qui combine l'épaisseur (text-stroke-width) et la couleur (text-stroke-color) du contour.

Syntaxe :

-webkit-text-stroke: [épaisseur] [couleur]; /* Pour la compatibilité */
text-stroke: [épaisseur] [couleur];

Exemple :

-webkit-text-stroke: 2px red;
text-stroke: 2px red;

Limitations et Problèmes Communs

Malgré sa simplicité, text-stroke présente quelques inconvénients majeurs :

• Problèmes de rendu des lignes internes : Avec certaines polices (notamment les polices sans-serif géométriques comme Montserrat, Inter, Heebo), text-stroke peut créer des lignes internes indésirables ou donner l'impression que le contour est appliqué à tous les segments internes des lettres. Cela peut rendre le texte moins lisible et visuellement décevant.

• Compatibilité : Bien que largement supporté par les navigateurs modernes (y compris Firefox, Chrome, Safari, Edge), il nécessite souvent le préfixe -webkit- pour fonctionner correctement partout

Polices Google Fonts recommandées pour text-stroke

Pour minimiser les problèmes de lignes internes, privilégiez les polices Google Fonts qui ont :

• Des formes de lettres simples et nettes : Moins il y a de détails complexes, moins il y a de risques d'artefacts.

• Une bonne épaisseur (weight) : Les graisses Bold ou Black gèrent mieux un contour sans que le corps de la lettre ne devienne trop fin.

• Des versions "Outline" dédiées : Ce sont les meilleures options car elles sont conçues spécifiquement pour le contour.

Quelques suggestions de polices Google Fonts qui fonctionnent généralement bien :

• Londrina Outline: C'est l'exemple parfait d'une police conçue avec un contour.

• Kumar One Outline: Une autre excellente option avec un contour intégré.

• Staatliches: Ses formes carrées et épaisses la rendent adaptée à un contour.

• Bebas Neue: Une police très condensée et audacieuse qui gère souvent bien les contours, surtout pour les titres.

• Anton: Très épaisse, elle peut bien absorber un contour prononcé.

• Oswald (Bold / Black): En gras, ses formes sont assez robustes pour un contour sans trop de soucis

Exemple de code text-stroke

Voici comment intégrer une police et appliquer text-stroke :

1. Ajoutez la police à votre HTML (par exemple, Bebas Neue) :
   

   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap">

2. Votre structure HTML :
   

   <h1 class="titre-contour-stroke">Mon Titre Contoured</h1>

3. Votre CSS :

   .titre-contour-stroke {
       font-family: 'Bebas Neue', sans-serif; /* Ou une autre police recommandée */
       font-size: 1rem; /* Taille pour bien voir l'effet */
       color: white; /* Couleur du remplissage du texte */
       -webkit-text-stroke: 3px black; /* Épaisseur et couleur du contour */
       text-stroke: 3px black; /* Version standard */
       text-align: center;
   }

3. Méthode 2 : Utiliser text-shadow (L'Alternative Robuste)

Face aux limitations de text-stroke, l'utilisation de multiples text-shadow est une technique très efficace et souvent préférée pour créer des contours de texte.

Pourquoi text-shadow est une bonne alternative ?

La propriété text-shadow permet de créer des ombres sous le texte. En créant plusieurs ombres, chacune décalée d'un pixel dans une direction différente (haut, bas, gauche, droite et les diagonales), on peut simuler un contour uniforme autour du texte.

Avantages de text-shadow

• Pas de lignes internes : C'est le plus grand avantage ! Puisque text-shadow projette des ombres plutôt que de modifier le chemin du glyphe, il n'y a pas de problèmes d'artefacts ou de lignes internes indésirables.

• Excellente compatibilité : text-shadow est une propriété CSS standard et est universellement supportée par tous les navigateurs modernes, sans préfixe.

• Contrôle fin : Vous pouvez ajuster précisément l'épaisseur du "contour" en variant le décalage des ombres

Polices Google Fonts pour text-shadow (Toutes !)

L'énorme avantage de cette méthode est qu'elle fonctionne parfaitement avec n'importe quelle police Google Font, y compris celles qui posent un problème avec text-stroke comme Montserrat, Inter, Roboto, etc. Vous n'avez pas de restrictions sur le choix de la police.

Exemple de Code text-shadow

1. Ajoutez la police à votre HTML (par exemple, Montserrat) :
   

   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap">
   

2. Votre structure HTML :

   <h1 class="titre-contour-shadow">Mon Titre Contoured</h1>
   

3. Votre CSS :
   

   .titre-contour-shadow {
       font-family: 'Montserrat', sans-serif; /* Utilisez n'importe quelle police Google Font ! */
       font-size: 1rem;
       color: white; /* Couleur du remplissage du texte */
       text-align: center;
       /* Création du contour avec text-shadow */
       text-shadow:
           -2px -2px 0 black, /* Ombre vers le haut-gauche */
           2px -2px 0 black,  /* Ombre vers le haut-droite */
           -2px 2px 0 black,  /* Ombre vers le bas-gauche */
           2px 2px 0 black;   /* Ombre vers le bas-droite */
           /* Pour un contour plus épais, ajoutez plus d'ombres ou augmentez les valeurs des pixels */
           /* Ex: 3px contour:
           -3px -3px 0 black, 3px -3px 0 black, -3px 3px 0 black, 3px 3px 0 black,
           -3px 0px 0 black, 0px -3px 0 black, 3px 0px 0 black, 0px 3px 0 black;
           */
   }

   Note : Les valeurs de 2px créent un contour d'environ 2 pixels d'épaisseur. Vous pouvez les ajuster. Pour un contour plus lisse et complet, vous pouvez ajouter des ombres pour les directions purement horizontales et verticales aussi (-Xpx 0px 0px, Xpx 0px 0px, 0px -Ypx 0px, 0px Ypx 0px).

4. Rendre le Remplissage du Texte Transparent

Que vous utilisiez text-stroke ou text-shadow pour le contour, vous pouvez facilement rendre le remplissage du texte transparent. Cela permet de voir l'arrière-plan ou d'autres éléments à travers les lettres.

Pour ce faire, définissez simplement la propriété color du texte à transparent.

.titre-contour-transparent {
    font-family: 'Bebas Neue', sans-serif; /* Ou Montserrat avec text-shadow */
    font-size: 1rem;
    color: transparent; /* LE REMPLISSAGE EST TRANSPARENT */
    text-align: center;

    /* Utilisez l'une des deux méthodes de contour ci-dessous : */

    /* Méthode text-stroke (si police compatible) */
    -webkit-text-stroke: 3px steelblue;
    text-stroke: 3px steelblue;

    /* OU Méthode text-shadow (recommandée pour la compatibilité et la qualité) */
    /* text-shadow:
        -2px -2px 0 steelblue,
        2px -2px 0 steelblue,
        -2px 2px 0 steelblue,
        2px 2px 0 steelblue; */
}

5. Conclusion

Bien que text-stroke soit la propriété native, ses limitations avec certaines polices et le rendu des lignes internes peuvent être frustrants. Pour la plupart des cas, et surtout si vous souhaitez utiliser n'importe quelle police Google Font (comme Montserrat), la méthode text-shadow est la solution la plus robuste, flexible et visuellement cohérente pour créer des effets de contour de texte.

N'hésitez pas à expérimenter avec différentes épaisseurs de contour et couleurs pour trouver le style parfait pour votre design !