# Effets de texte rétro : lettrage riso, double et traînée

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

Pas besoin d’un pack de filtres pour donner un air vintage à un texte. Trois traitements empruntés à l’impression bon marché, aux affiches décalées et aux vieux génériques font presque tout le travail.

## The short version

- La plupart des effets de texte rétro viennent de trois traitements : le défaut de repérage riso, l’écho double décalé et la traînée de copies répétées.
- Un effet riso imite l’impression risographique, où deux encres se chevauchent en étant légèrement décalées et se mélangent là où elles se rencontrent.
- Un effet double place une copie pleine du mot derrière l’original, décalée sur une courte distance dans une couleur contrastée.
- Un effet traînée répète le mot plusieurs fois derrière lui, chaque copie plus loin, pour suggérer la vitesse ou un générique des années 70.
- Les effets rétro sont plus réussis sur quelques grands mots en police grasse, avec des couleurs tirées du fond et un seul effet par création.

Presque tout **effet de texte rétro** que vous voyez relève de trois traitements. Le **riso** imite l’impression bon marché en deux couleurs, avec des encres qui se chevauchent légèrement de travers. Le **double** place une copie pleine du mot derrière lui, décalée dans une seconde couleur, comme une sérigraphie dont un calque serait mal aligné. La **traînée** répète le mot plusieurs fois derrière lui, en s’éloignant, comme un carton de titre des années 1970 ou un mot en mouvement. Chacun fonctionne sur quelques grands mots en police grasse, dans des couleurs tirées de la création, un seul effet à la fois.

| Effet | Ressemble à | Ambiance | Convient à |
| --- | --- | --- | --- |
| Riso | Deux encres légèrement mal repérées, qui se mélangent là où elles se chevauchent | Fait main, indé, fanzine | Librairies, cafés, concerts, studios créatifs |
| Double | Un écho plein décalé derrière le mot | Audacieux, pop, sérigraphie | Soldes, streetwear, posts de lancement |
| Traînée | Plusieurs copies répétées qui s’éloignent | Mouvement, années 70, psychédélique | Musique, événements, campagnes d’été |

Trois traitements, trois voix différentes. Choisissez selon l’impression que doit donner le message, pas selon ce qui paraît le plus spectaculaire.

## L’effet de texte riso

Une risographe est une imprimante à pochoir : chaque couleur d’encre a son pochoir et son tambour, donc un visuel en deux couleurs s’imprime en deux couches. Les couches s’alignent rarement à la perfection, ce qui laisse dépasser un liséré de chaque couleur et fait apparaître une troisième couleur là où les encres se chevauchent. Les roses fluo, les bleus vifs et les jaunes solaires des encres riso sont devenus un style à part entière, prisé des fanzines, des éditeurs indépendants et des illustrateurs.

- Rose fluo: #ff48b0
- Bleu moyen: #0078bf
- Jaune: #ffe800
- Sarcelle: #00838a
- Rouge vif: #f15060
- Papier non couché: #f4efe6

Approximations à l’écran d’encres riso courantes, sur un ton de papier blanc cassé. Choisissez deux encres : rose et bleu, ou jaune et sarcelle, sont des associations classiques.

Pour réussir, gardez un décalage faible, quelques pour cent de la hauteur des lettres, et laissez les couleurs se *multiplier* là où elles se chevauchent plutôt que de se recouvrir. Ajoutez un peu de grain aux lettres si possible : la vraie encre riso se dépose de façon légèrement inégale sur le papier non couché. Du rose sur du bleu donne un violet profond au croisement, et c’est ce détail qui rend l’effet crédible.

## L’effet de texte double

Côté technique, le double est le plus simple des trois : une copie pleine du mot, dans une couleur contrastée, placée derrière l’original et légèrement décalée. On y lit une sérigraphie ou un autocollant, assuré et graphique. Contrairement à une ombre portée, l’écho est net et coloré plutôt que sombre et doux. Poussez le décalage un peu plus loin que ce qui semble prudent, environ 5 à 8 % de la hauteur des lettres ; trop proche, il ressemble à une erreur.

- Fond chaud, écho rouge profond: `linear-gradient(135deg, #fde68a 0%, #fb923c 100%)`
- Fond menthe, écho bleu marine: `linear-gradient(135deg, #a7f3d0 0%, #22d3ee 100%)`
- Fond violet, écho rose: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`

Des fonds qui conviennent à un effet double. La couleur de l’écho doit contraster avec le fond et avec la face de la lettre.

## L’effet de texte en traînée

La traînée répète le mot quatre à huit fois derrière lui, chaque copie s’éloignant un peu plus. Quand les copies changent de couleur en chemin, par exemple dans une palette chaude de coucher de soleil, on obtient l’inimitable look de générique des années 70. Quand leur opacité s’estompe, on obtient du mouvement, comme si le mot venait d’arriver. Gardez des pas réguliers et une direction constante ; un espacement aléatoire paraît cassé plutôt que vintage.

Un post en portrait avec les mots Far out en grand sur un dégradé chaud, et les détails d’une soirée sur un toit en dessous

Un titre court et fort sur un fond chaud : la forme qu’exige une traînée ou un effet double.

Une couverture de story verticale pour un salon de la petite édition, avec un numéro au-dessus du titre et les détails en dessous

Une story de salon de fanzines, où une finition riso en deux couleurs sur le titre serait tout à fait à sa place.

## Effets de texte rétro en CSS

Les trois se construisent avec `text-shadow`, plus un mode de fusion pour le riso. Utilisez des décalages en `em` pour que l’effet suive la taille de la police, et gardez le texte en vrai texte sélectionnable.

```css
/* Double: one crisp echo */
.double {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #b91c1c;
}

/* Trail: repeated copies through a warm palette */
.trail {
  color: #fff7ed;
  text-shadow:
    0.04em 0.04em 0 #fbbf24,
    0.08em 0.08em 0 #f97316,
    0.12em 0.12em 0 #ea580c,
    0.16em 0.16em 0 #c2410c,
    0.20em 0.20em 0 #7c2d12;
}

/* Riso: two inks multiplied, slightly out of register */
.riso {
  position: relative;
  color: #0078bf;
  mix-blend-mode: multiply;
}
.riso::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #ff48b0;
  transform: translate(0.04em, -0.03em);
  mix-blend-mode: multiply;
}
```

Pour le riso, écrivez le mot deux fois : `<h1 class="riso" data-text="Zine fair">Zine fair</h1>`. Multiply fonctionne sur fond clair, comme la vraie encre sur le papier. Certains lecteurs d’écran annoncent le contenu généré : le mot peut donc être lu deux fois.

> **Le riso demande un fond clair** Multiply assombrit, exactement comme l’encre sur le papier, et disparaît donc sur fond sombre. Pour une création sombre, utilisez plutôt l’effet double.

## Bien utiliser les effets de texte rétro

1. **Partez de la bonne police** Grasse et simple, ou une serif douce des années 70. Les [polices rétro](https://gradiently.design/fr/guide/retro-fonts) classent les polices par décennie.
2. **Appliquez-le à deux à cinq mots** Le titre seulement. Les détails restent plats et simples.
3. **Prenez les couleurs dans le fond** L’écho, la traînée ou la seconde encre doivent venir de la palette déjà présente dans la création.
4. **Gardez un décalage voulu** Faible pour le riso, un peu plus franc pour le double, à pas réguliers pour la traînée.
5. **Un seul effet par création** Riso plus traînée plus contour, c’est un déguisement. Un seul effet, c’est un choix.

### À éviter

- Une traînée sur un long titre
- Des encres riso sur fond noir
- Un écho si proche qu’on dirait un défaut d’impression
- Des lueurs mêlées aux décalages
- Un effet différent sur chaque post

### À faire

- Une traînée sur un ou deux mots courts
- Du riso sur des tons de papier et des couleurs pâles
- Un décalage net et assumé
- Uniquement des copies nettes et pleines
- Un effet rétro comme signature de campagne

Pour l’ensemble des traitements, contours et extrusions compris, voyez les [effets de texte](https://gradiently.design/fr/guide/text-effects), le [texte contour](https://gradiently.design/fr/guide/outline-text) et les [effets de texte 3D](https://gradiently.design/fr/guide/3d-text-effect). Le grain rend le riso particulièrement convaincant ; les [dégradés grainés](https://gradiently.design/fr/guide/grainy-gradients) montrent comment en ajouter à un fond.

## Riso, Double et Traînée dans Gradiently

Les traitements de Lettrage de Gradiently incluent Riso, Double et Traînée, chacun dessiné dans les couleurs du Mark : aucune copie à empiler à la main. Leurs versions penchent vers le graphique : Riso imprime la seconde encre en trame fine, légèrement décalée ; Double dessine des lettres ouvertes avec un second contour autour ; Traînée envoie des contours qui s’estompent derrière des mots pleins. Le Mark garde les mots lisibles en déplaçant sa zone la plus calme derrière eux, et son grain donne à un titre rétro la surface imprimée qu’il réclame.

## FAQ

### Qu’est-ce qu’un effet de texte riso ?

Il imite l’impression risographique : deux couleurs d’encre imprimées légèrement de travers, qui se chevauchent et se mêlent en une troisième couleur là où elles se rencontrent.

### Comment faire un effet de texte rétro en CSS ?

Empilez des copies pleines en `text-shadow` sans flou. Une copie fait un effet double, plusieurs copies décalées font une traînée, et un pseudo-élément multiplié fait du riso.

### Quelles couleurs conviennent à un effet de texte années 70 ?

Des dégradés chauds de coucher de soleil comme l’or, l’orange, la rouille et le brun, sur un fond crème ou brun profond.

### Quelle différence entre un effet double et une ombre portée ?

Le double est une copie nette et colorée décalée derrière le mot. Une ombre portée est le plus souvent sombre et floue.