L’essentiel en bref
- 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.
Sur cette page
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.
Ambiance
Convient à
Ambiance
Convient à
Ambiance
Convient à
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.
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.
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 titre court et fort sur un fond chaud : la forme qu’exige une traînée ou un effet double.
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.
/* 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;
}<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.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 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, le texte contour et les effets de texte 3D. Le grain rend le riso particulièrement convaincant ; les dégradés grainés 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.
Les questions qu’on nous pose
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.
É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