# Retro text effects: riso, double and trail lettering

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

You don't need a filter pack to make type feel vintage. Three treatments, borrowed from cheap printing, offset posters and old title sequences, do almost all of the work.

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

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.

| Effect | Looks like | Feels | Suits |
| --- | --- | --- | --- |
| Riso | Two inks, slightly out of register, mixing where they overlap | Handmade, indie, zine | Bookshops, coffee, gigs, creative studios |
| Double | A solid echo offset behind the word | Bold, poppy, screen print | Sales, streetwear, launch posts |
| Trail | Several repeated copies stepping away | Motion, 70s, psychedelic | Music, events, summer campaigns |

Three treatments, three different voices. Choose by what the message should feel like, not by what looks most impressive.

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

- Fluorescent pink: #ff48b0
- Medium blue: #0078bf
- Yellow: #ffe800
- Teal: #00838a
- Bright red: #f15060
- Uncoated paper: #f4efe6

Screen approximations of popular riso inks, on an off white paper tone. Pick two inks: pink and blue, or yellow and teal, are classic pairings.

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.

- Warm ground, deep red echo: `linear-gradient(135deg, #fde68a 0%, #fb923c 100%)`
- Mint ground, navy echo: `linear-gradient(135deg, #a7f3d0 0%, #22d3ee 100%)`
- Violet ground, pink echo: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`

Grounds that suit a double effect. The echo colour should contrast with both the ground and the letter face.

## 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 portrait post with the words Far out set large over a warm gradient, with rooftop event details below

A short, loud headline on a warm ground: the shape a trail or double treatment needs.

A vertical story cover for a small press fair, with an issue number above the title and details below

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.

```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;
}
```

For riso, write the word twice: `<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.

> **Riso needs a light ground** Multiply darkens, exactly as ink does on paper, so it vanishes on dark backgrounds. For a dark design, use the double effect instead.

## How to use retro text effects well

1. **Start with the right face** Heavy and simple, or a soft 70s serif. [Retro fonts](https://gradiently.design/guide/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](https://gradiently.design/guide/text-effects), [outline text](https://gradiently.design/guide/outline-text) and [3D text effects](https://gradiently.design/guide/3d-text-effect). Grain makes riso especially convincing; [grainy gradients](https://gradiently.design/guide/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.

## FAQ

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