The short version
- Most retro text effects come from three treatments: riso misregistration, a double offset echo and a trail of repeated copies.
- A riso effect imitates risograph printing, where two ink colours overlap slightly out of line and mix where they meet.
- A double effect places one solid copy of the word behind the original, offset a short distance in a contrasting colour.
- A trail effect repeats the word several times behind itself, each copy further away, suggesting speed or a 70s title sequence.
- Retro effects look best on a few large words in a heavy face, with colours taken from the background and only one effect per design.
On this page
Nearly every retro text effect you see is one of three treatments. Riso imitates cheap two colour printing, with inks overlapping slightly out of line. Double puts a solid copy of the word behind itself, offset in a second colour, like a screen print with a misaligned layer. Trail repeats the word several times behind itself, stepping away, like a 1970s title card or a word in motion. Each works on a few large words in a heavy face, in colours taken from the design, one effect at a time.
Feels
Suits
Feels
Suits
Feels
Suits
The riso text effect
A risograph is a stencil printer, and each ink colour gets its own stencil and drum, so a two colour design is printed as two layers. The layers rarely line up perfectly, which leaves a sliver of each colour peeking out and a third colour where the inks overlap. The fluorescent pinks, bright blues and sunny yellows of riso inks have become a style of their own, popular with zines, independent publishers and illustrators.
To get it right, keep the offset small, a few percent of the letter height, and let the colours multiply where they overlap rather than one covering the other. Add a little grain to the letters if you can: real riso ink sits slightly unevenly on uncoated paper. Pink over blue makes a deep violet at the overlap, which is the detail that sells the effect.
The double text effect
As a technique, double is the simplest of the three: one solid copy of the word, in a contrasting colour, sitting behind and slightly offset from the original. It reads as a screen print or a sticker, confident and graphic. Unlike a drop shadow, the echo is crisp and colourful rather than dark and soft. Push the offset a little further than feels safe, around 5 to 8 percent of the letter height; too close and it looks like a mistake.
The trail text effect
Trail repeats the word four to eight times behind itself, each copy stepping further away. When the copies change colour as they go, through a warm sunset palette for example, you get the unmistakable 70s title look. When they fade in opacity, you get motion, as if the word just arrived. Keep the steps even and the direction consistent; random spacing looks broken rather than vintage.
A short, loud headline on a warm ground: the shape a trail or double treatment needs.
A zine fair story, where a two colour riso finish on the title would feel right at home.
Retro text effects in CSS
All three can be built with text-shadow, plus a blend mode for riso. Use em offsets so the effect scales with the font size, and keep the text as real, selectable text.
/* 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 works on light grounds, like real ink on paper. Some screen readers announce generated content, so the word may be read twice.How to use retro text effects well
- 1
Start with the right face
Heavy and simple, or a soft 70s serif. Retro fonts lists faces by decade.
- 2
Apply it to two to five words
The headline only. Details stay flat and plain.
- 3
Take colours from the background
The echo, trail or second ink should come from the palette already in the design.
- 4
Keep the offset intentional
Small for riso, a little bolder for double, evenly stepped for trail.
- 5
Use one effect per design
Riso plus trail plus an outline is a costume. One effect is a choice.
Avoid
- A trail on a long headline
- Riso inks on a black background
- An echo so close it looks like a printing fault
- Glows mixed in with the offsets
- A different effect on every post
Do
- A trail on one or two short words
- Riso on paper tones and pale colours
- A clear, confident offset
- Crisp, solid copies only
- One retro effect as a campaign signature
For the broader set of treatments, including outlines and extrusions, see text effects, outline text and 3D text effects. Grain makes riso especially convincing; grainy gradients shows how to add it to a background.
Riso, Double and Trail in Gradiently
Gradiently's Lettering treatments include Riso, Double and Trail, each drawn in the Mark's own colours, so there are no copies to stack by hand. Its versions lean graphic: Riso prints the second ink as a fine halftone, a touch off register; Double draws open letters with a second outline around them; Trail sends fading outlines back behind solid words. The Mark keeps the words readable by moving its calmest region behind them, and its grain gives a retro headline the printed surface it wants.
Questions people ask
What is a riso text effect?
It imitates risograph printing: two ink colours printed slightly out of line, overlapping and mixing into a third colour where they meet.
How do I make a retro text effect in CSS?
Stack solid text-shadow copies with no blur. One copy makes a double effect, several stepped copies make a trail, and a multiplied pseudo element makes riso.
What colours suit a 70s text effect?
Warm sunset steps such as gold, orange, rust and brown, on a cream or deep brown ground.
What is the difference between a double effect and a drop shadow?
A double is a crisp, coloured copy offset behind the word. A drop shadow is usually dark and blurred.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile