L’essentiel en bref
- Les effets de texte sont des traitements appliqués aux lettres, comme les contours, les inlines, l’extrusion, les échos décalés, le décalage d’impression et les halos.
- Les effets fonctionnent le mieux sur quelques grands mots, dans une graisse forte, où ils ajoutent du caractère sans rendre le texte plus difficile à lire.
- Les effets font datés quand ils sont appliqués à pleine intensité sur chaque ligne, empilés, ou utilisés pour rattraper une typographie faible.
- Le texte en contour demande une police épaisse et simple et un fond calme, parce que les lettres perdent leur forme pleine.
- Choisissez un seul effet par création et reliez ses couleurs à la palette de l’arrière-plan pour qu’il paraisse pensé plutôt qu’ajouté.
Sur cette page
Les effets de texte sont des traitements appliqués aux lettres : un contour, un inline, une extrusion 3D, un écho décalé, un décalage d’impression ou un halo doux. Ils ne font pas datés si trois règles sont respectées : un seul effet par création, appliqué à quelques grands mots dans une graisse forte, avec des couleurs prises dans l’arrière-plan plutôt que dans un préréglage. Les effets échouent quand ils s’empilent, s’étalent sur chaque ligne ou servent à sauver une typographie qui ne fonctionnait pas.
Ce guide présente les grandes familles d’effets, le message auquel chacune convient, comment les garder lisibles et comment en construire quelques-uns en CSS. Si vous n’avez pas encore choisi la police, commencez par les polices display, car la plupart des effets demandent des lettres grandes et robustes.
Les principaux types d’effets de texte
La plupart des traitements de lettrage appartiennent à une poignée de familles. Chacune porte ses propres associations : en choisir une, c’est en réalité choisir un ton.
| Effet | À quoi il ressemble | Ton qu’il donne | Risque pour la lisibilité |
|---|---|---|---|
| Contour | Lettres dessinées uniquement par leur trait | Aérien, moderne, éditorial | Élevé sur un fond chargé |
| Inline | Un fin filet à l’intérieur de chaque trait | Enseigne vintage, artisanat, sport | Faible en grand format |
| Extrusion | Lettres avec une profondeur 3D | Rétro, ludique, bruyant | Modéré |
| Double ou écho | Une copie décalée ou une traînée derrière | Mouvement, musique, énergie | Modéré |
| Découpé | Lettres tranchées et décalées | Tension, mode, tech | Modéré |
| Riso | Couches de couleur décalées, texture d’impression | Impression indé, fanzines, chaleur | Faible si le décalage est léger |
| Halo ou lueur | Une lumière douce autour des lettres | Nuit, néon, luxe calme | Faible sur fond sombre |
Quand un effet de texte aide, et quand il nuit
Un effet aide quand il porte un sens que les mots seuls ne portent pas. Un écho derrière Fort le fait vibrer. Une extrusion sur l’ardoise d’un menu rétro l’inscrit dans une époque. Un halo sur l’affiche d’une soirée évoque la salle. Quand l’effet ne dit rien, il devient décoration, et la décoration vieillit vite.
Un seul grand mot, c’est là qu’un effet mérite sa place : peu à lire, beaucoup à ressentir.
Sur une affiche d’événement, l’effet se limite au titre. Les dates et les détails restent sobres.
À éviter
- Un effet sur le titre et sur le texte courant
- Contour plus ombre plus halo sur un seul mot
- Les couleurs par défaut, comme une ombre portée noire partout
- Des polices fines ou légères sous des effets lourds
- Des effets pour rendre excitant un texte faible
À faire
- Un seul effet, sur les quelques plus grands mots
- Un seul traitement par création, assumé
- Des couleurs d’effet prises dans la palette du fond
- Des lettres épaisses et simples qui survivent à l’effet
- Un texte qui fonctionne tel quel, puis un effet qui ajoute du ton
Comment rendre lisible un texte en contour
Le texte en contour est l’effet qui échoue le plus souvent, parce qu’il retire la forme pleine qui rend les lettres faciles à reconnaître. Utilisez-le sur une linéale ou une égyptienne grasse aux formes ouvertes, en grand, sur un fond calme. Réglez un trait assez épais pour se lire comme une ligne et non comme un filet : environ 2 à 4 % de la taille de la police est un bon point de départ.
Un schéma fiable associe un mot plein et un mot en contour, par exemple Summer en plein et Sessions en contour. Le mot plein ancre la lecture ; le contour ajoute du rythme. N’utilisez jamais de contour sur du petit texte, et vérifiez sur un téléphone, où les traits fins disparaissent en premier.
/* Outline: a stroke, no fill. */
.outline {
color: transparent;
-webkit-text-stroke: 0.03em #f5f0ff;
}
/* Extrude: stacked shadows, each 1px further. */
.extrude {
color: #fde8d0;
text-shadow:
1px 1px 0 #d9485f,
2px 2px 0 #d9485f,
3px 3px 0 #b83250,
4px 4px 0 #b83250,
5px 5px 0 #8f2442,
6px 6px 0 #8f2442;
}
/* Echo: one offset copy in a palette colour. */
.echo {
color: #ffffff;
text-shadow: 0.06em 0.06em 0 #7c3aed;
}
/* Halo: a soft glow for dark grounds. */
.halo {
color: #fff7ed;
text-shadow: 0 0 0.25em rgb(251 146 60 / 0.55),
0 0 0.8em rgb(244 114 182 / 0.35);
}-webkit-text-stroke fonctionne dans tous les grands navigateurs malgré son préfixe. Les ombres en em suivent la taille du texte.Choisir les couleurs d’un effet de texte
Un effet paraît ajouté quand ses couleurs viennent de nulle part. Il paraît pensé quand elles viennent de l’arrière-plan. Prenez la couleur du flanc de l’extrusion dans la zone la plus sombre du dégradé, l’écho dans sa couleur la plus saturée et le halo dans sa couleur la plus claire. L’effet se lit alors comme la lumière et la matière d’une même scène.
Gardez la face des lettres très contrastée avec le fond, et placez l’effet entre les deux en luminosité. L’effet ajoute ainsi de la profondeur sans retirer de contraste aux lettres. Pour les règles de contraste de base, voir le contraste des couleurs.
Les effets de texte dans Gradiently
Le Studio de Gradiently propose huit traitements de Lettrage : Contour, Inline, Découpé, Extrusion, Double, Traînée, Riso et Halo. Un Mark sait aussi où se trouvent les mots : sa zone la plus calme se place derrière eux, et l’Encre automatique choisit un texte clair ou foncé ligne par ligne dans la palette du Mark, ce qui donne au mot traité un fond stable. Les mêmes règles s’appliquent toujours : un traitement, quelques mots, une police grasse.
Une seule phrase traitée sur un fond calme montre la retenue à l’œuvre.
Pour mieux faire lire la typographie sur des fonds colorés, lisez du texte sur un dégradé ; pour les effets intégrés au dégradé lui-même, voir le texte en dégradé en CSS.
Les questions qu’on nous pose
Quels effets de texte font moderne ?
Les effets retenus : un contour épais associé à un mot plein, un petit écho décalé, un léger décalage riso ou un halo doux sur fond sombre, chacun utilisé sur un ou deux grands mots.
Comment faire un texte en contour en CSS ?
Rendez la couleur du texte transparente et ajoutez -webkit-text-stroke avec une épaisseur et une couleur, par exemple -webkit-text-stroke: 0.03em #ffffff. Cela fonctionne dans tous les grands navigateurs.
Comment faire un effet de texte 3D ?
Empilez plusieurs couches de text-shadow, chacune décalée d’un pixel de plus dans la même direction, de plus en plus sombres vers l’arrière. Prenez les couleurs dans votre arrière-plan pour que la profondeur semble éclairée par la même lumière.
Les effets de texte nuisent-ils à la lisibilité ?
Ils le peuvent. Réservez les effets aux mots grands et gras, un seul effet par création, et vérifiez que la face des lettres garde un fort contraste avec l’arrière-plan.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
