# Effets de lettrage : Contour, Inline, Découpé, Extrusion et plus

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

Un traitement transforme une ligne de texte en lettrage, dessiné dans les couleurs de votre Mark. Voici les huit, avec ce que chacun fait de mieux et ceux à laisser de côté.

## The short version

- Gradiently propose huit effets de lettrage : Contour, Inline, Découpé, Extrusion, Double, Traînée, Riso et Halo.
- Chaque traitement est dessiné dans les couleurs du Mark de la création, si bien que le lettrage appartient toujours au fond.
- Les effets de lettrage fonctionnent mieux sur des mots d’affichage courts, comme un titre, un nom ou un seul mot, pas sur le texte courant.
- Contour, Découpé et Extrusion portent leur propre contraste et conviennent aux affiches fortes ; Inline, Double et Riso conviennent aux styles éditoriaux et imprimés.
- Utilisez un seul traitement par création, sur la ligne qui compte le plus, et gardez le texte d’accompagnement simple.

Gradiently propose huit **effets de lettrage** : Contour, Inline, Découpé, Extrusion, Double, Traînée, Riso et Halo. Chacun transforme une ligne de texte en lettrage dessiné dans les couleurs de votre Mark : des courbes de niveau autour des mots, une ligne gravée dans chaque lettre, des mots découpés dans une plaque, des lettres profondes en trois dimensions, et plus encore. Ils sont faits pour les mots d’affichage, un titre ou un nom, et fonctionnent mieux un par un, sur la ligne que vous voulez le plus faire voir.

## Les huit traitements de lettrage en un coup d’œil

| Traitement | Ce qu’il dessine | Évoque | Idéal pour |
| --- | --- | --- | --- |
| **Contour** | Des courbes de niveau qui ondulent autour des mots | Cartes, topographie, son | Affiches de festival, pochettes d’album, marques outdoor |
| **Inline** | Une ligne gravée dans chaque lettre, où le Mark apparaît comme une seconde couleur | Enseignes, impression vintage | Titres façon devanture, menus, étiquettes |
| **Découpé** | Des mots découpés dans une plaque pleine | Pochoir, papier découpé | Couvertures fortes, posts de soldes, déclarations en un mot |
| **Extrusion** | Des lettres profondes aux flancs dans les couleurs du Mark | Solide, sculptural, rétro | Titres d’événement, lancements, miniatures YouTube |
| **Double** | Des lettres évidées dessinées deux fois, légèrement décalées | Écho, mouvement, mode | Couvertures éditoriales, musique, vie nocturne |
| **Traînée** | Des contours qui traînent derrière les lettres, dans une couleur de traînée réglable | Vitesse, mouvement, années 1970 | Sport, comptes à rebours, stories énergiques |
| **Riso** | Deux encres légèrement décalées, avec un pointillé granuleux | Fanzines en risographie, impression indé | Affiches, fanzines, boulangeries, librairies |
| **Halo** | Une lumière douce dans la couleur du Mark autour des lettres | Néon, crépuscule, rêverie | Décoration uniquement, jamais pour corriger la lisibilité |

Les huit traitements. Chacun puise dans la palette du Mark : changer de Mark recolore le lettrage avec lui.

## Contour, Découpé et Extrusion : un lettrage qui porte son propre contraste

Ces trois traitements intègrent un bord fort aux lettres, ce qui explique qu’ils tiennent sur des Marks animés. **Contour** entoure les mots de lignes comme une carte en relief, si bien que le lettrage semble surgir du fond. **Découpé** présente les mots comme des formes découpées dans une plaque pleine, un effet assuré et graphique. **Extrusion** donne de la profondeur à chaque lettre, dessinée dans les couleurs du Mark : le look classique d’un titre de lancement ou d’une miniature.

Une affiche portrait avec le seul mot Solstice composé très grand sur un Mark dégradé chaud

Un seul mot, très grand : l’échelle pour laquelle Contour et Extrusion sont faits.

La même création Solstice en affiche d’événement, avec le titre en grand et des informations simples dessous

Le titre traité en haut, les informations en texte simple dessous. Seul le titre reçoit l’effet.

Pour comprendre comment fonctionnent en général le texte en relief et le texte détouré, [les effets de texte 3D](https://gradiently.design/fr/guide/3d-text-effect) et [le texte en contour](https://gradiently.design/fr/guide/outline-text) expliquent le métier qui se cache derrière.

## Inline, Double et Riso : la famille imprimée et éditoriale

**Inline** grave une seule ligne dans chaque lettre, et comme cette ligne laisse voir le Mark, le fond devient la seconde couleur du lettrage. Il convient surtout aux polices grasses et larges, qui laissent de la place dans le trait. **Double** dessine des lettres évidées deux fois, légèrement décalées, pour un écho qui évoque l’imprimé de mode ou de musique. **Riso** imite la risographie : deux encres qui ne se superposent pas tout à fait et un pointillé granuleux, parfait pour tout ce qui doit sembler imprimé à la main.

> **Accordez le traitement à la police** Inline et Découpé demandent des traits épais : associez-les à une police d’affichage grasse. Double et Traînée sont plus beaux sur des lettres ouvertes et simples. Riso pardonne presque toutes les polices, ce qui en fait un premier essai sans risque.

## Traînée et Halo : mouvement et ambiance

**Traînée** répète le contour d’un mot derrière lui, comme des lettres qui laissent un sillage. Vous pouvez régler la couleur de la traînée, et l’effet évoque la vitesse : idéal pour le sport, les comptes à rebours et tout ce qui doit sembler en mouvement même dans une image fixe. **Halo** entoure les lettres d’une lumière douce dans la couleur du Mark. C’est un effet purement décoratif, une ambiance plutôt qu’un outil, et jamais un moyen de sauver un texte difficile à lire. Si une ligne se lit mal, augmentez le niveau de réaction du Mark ou laissez [l’encre automatique](https://gradiently.design/fr/guide/auto-ink-legibility) choisir l’autre encre.

## Choisir un effet de lettrage selon le travail

| Vous créez | Essayez d’abord | Puis essayez |
| --- | --- | --- |
| Une affiche de concert ou de festival | Contour | Riso |
| Un post de lancement de produit | Extrusion | Découpé |
| Le titre du menu d’un café ou d’une boulangerie | Inline | Riso |
| Une miniature YouTube | Extrusion | Découpé |
| Une couverture façon magazine ou une ouverture de carrousel | Double | Inline |
| Un compte à rebours ou une story sportive | Traînée | Extrusion |
| Un fanzine ou une affiche de librairie | Riso | Double |

Des points de départ, pas des règles. Essayez-en deux, regardez-les à la taille où on les verra vraiment, et gardez celui qui se lit en premier.

### À éviter

- Un traitement sur du texte courant ou de petits détails
- Deux traitements différents dans une même création
- De longs titres de huit mots ou plus
- Halo pour rendre lisible une ligne faible

### À faire

- Un traitement sur un ou deux mots d’affichage
- Un texte d’accompagnement simple et bien espacé
- Des polices grasses pour Inline et Découpé
- Une vérification sur téléphone, à la taille réelle

## Ajouter un effet de lettrage dans le Studio

1. **Sélectionnez le texte** Choisissez le titre ou le mot à traiter. Gardez tout le reste en texte simple.
2. **Choisissez un traitement** Prenez l’un des huit traitements de lettrage. Il se dessine aussitôt dans les couleurs du Mark de la création.
3. **Ajustez la typographie** Passez à une graisse ou une chasse plus forte si l’effet paraît serré, et ajoutez un peu d’interlettrage pour Double et Traînée.
4. **Essayez un autre Mark** Changez de Mark et regardez le lettrage se recolorer avec lui. C’est le moyen le plus rapide de juger un traitement.
5. **Vérifiez chaque taille** Déclinez en story ou en miniature et vérifiez que le mot traité se lit encore à cette échelle.

## Les effets de lettrage en CSS, pour le web

Si vous voulez un rendu proche sur un site web, deux de ces effets se traduisent proprement en CSS : un contour dans l’esprit de Double et une extrusion en escalier. Les deux utilisent du vrai texte, qui reste sélectionnable et accessible.

```css
/* Open outline letters, in the spirit of Double */
.outline {
  color: transparent;
  -webkit-text-stroke: 2px #f4b26a;
  text-shadow: 6px 6px 0 #7a2e5c;
}

/* A stepped extrusion in two tones */
.extrude {
  color: #fbe7d4;
  text-shadow:
    1px 1px 0 #c2577a,
    2px 2px 0 #c2577a,
    3px 3px 0 #a3456a,
    4px 4px 0 #a3456a,
    5px 5px 0 #7a2e5c,
    6px 6px 0 #7a2e5c;
}
```

Des ombres nettes, sans flou, construisent de la profondeur plutôt qu’une lueur. `-webkit-text-stroke` est pris en charge par tous les navigateurs actuels ; voir [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke).

Pour l’ensemble des effets, y compris ceux qui se transposent mal sur le web, voir [les effets de texte](https://gradiently.design/fr/guide/text-effects). Et si vous vous demandez si vous avez vraiment besoin de lettrage, [lettrage ou typographie](https://gradiently.design/fr/guide/lettering-vs-typography) vous aidera à trancher.

## FAQ

### Quels effets de lettrage propose Gradiently ?

Huit : Contour, Inline, Découpé, Extrusion, Double, Traînée, Riso et Halo, chacun dessiné dans les couleurs du Mark de la création.

### Peut-on utiliser les effets de lettrage sur le texte courant ?

Mieux vaut éviter. Les traitements sont faits pour des mots d’affichage courts ; une typographie simple garde les textes longs faciles à lire.

### Quel effet de lettrage choisir pour une affiche ?

Contour, Extrusion et Riso sont de bons choix pour une affiche. Contour et Extrusion portent leur propre contraste, et Riso donne un rendu imprimé.

### Les effets de lettrage changent-ils de couleur avec le Mark ?

Oui. Chaque traitement puise dans la palette du Mark : changer de Mark recolore le lettrage.

### Faut-il utiliser Halo pour rendre un texte plus lisible ?

Non. Halo est décoratif. Pour la lisibilité, augmentez le niveau de réaction du Mark ou laissez l’encre automatique choisir l’autre encre.