# Effets de texte qui ne font pas daté : contour, extrusion, écho

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

La plupart des effets de texte font datés parce qu’on les applique partout, à pleine intensité, sans raison. Posés sur un seul mot, dans la bonne graisse et la bonne couleur, ils comptent parmi les outils les plus expressifs de la typographie.

## The short version

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

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](https://gradiently.design/fr/guide/display-fonts), 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 |

Sept familles d’effets de lettrage. Plus le risque est élevé, plus l’effet demande de soin.

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

Une création verticale avec un seul grand mot sur un dégradé vif, le type de mise en page qui convient à un effet de lettrage

Un seul grand mot, c’est là qu’un effet mérite sa place : peu à lire, beaucoup à ressentir.

Une affiche d’événement verticale avec un titre stylisé et des détails sobres sur un dégradé sombre

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.

```css
/* 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);
}
```

Quatre effets en CSS pur. `-webkit-text-stroke` fonctionne dans tous les grands navigateurs malgré son préfixe. Les ombres en `em` suivent la taille du texte.

> **Accessibilité** Les effets construits en CSS gardent les mots sous forme de vrai texte : lecteurs d’écran, moteurs de recherche et outils de traduction les lisent toujours. Les effets intégrés à une image demandent de répéter les mots dans le texte alternatif.

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

- Fond : violet nuit: #1a1033
- Écho : violet: #7c3aed
- Halo : lumière rose: #f472b6
- Lettre : blanc chaud: #fde8d0

Des couleurs d’effet tirées d’un seul dégradé : un fond sombre, un écho saturé, un halo et une face de lettre blanc chaud.

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](https://gradiently.design/fr/guide/color-contrast-accessibility).

## 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 création carrée avec une courte phrase en grand sur un dégradé calme, entourée de beaucoup d’espace vide

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é](https://gradiently.design/fr/guide/text-on-gradient) ; pour les effets intégrés au dégradé lui-même, voir [le texte en dégradé en CSS](https://gradiently.design/fr/guide/css-gradient-text).

## FAQ

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