# Lettering effects: Contour, Inline, Cut, Extrude and more

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

A treatment turns a line of type into a piece of lettering, drawn in your Mark's own colours. Here are all eight, with the jobs each one is good at and the ones to skip.

## The short version

- Gradiently has eight lettering effects: Contour, Inline, Cut, Extrude, Double, Trail, Riso and Halo.
- Every treatment is drawn in the colours of the design's Mark, so the lettering always belongs to the background.
- Lettering effects work best on short display words such as a title, a name or a single word, not on body text.
- Contour, Cut and Extrude carry their own contrast and suit bold posters; Inline, Double and Riso suit editorial and print looks.
- Use one treatment per design, on the line that matters most, and keep supporting text plain.

Gradiently has eight **lettering effects**: Contour, Inline, Cut, Extrude, Double, Trail, Riso and Halo. Each turns a line of type into lettering drawn in your Mark's own colours: elevation lines ringing the words, a line carved inside each letter, words cut out of a plate, deep three dimensional letters and more. They are for display words, a title or a name, and they work best one at a time, on the line you most want people to see.

## All eight lettering treatments at a glance

| Treatment | What it draws | Feels like | Best for |
| --- | --- | --- | --- |
| **Contour** | Elevation lines rippling out around the words | Maps, topography, sound | Festival posters, album covers, outdoor brands |
| **Inline** | A line carved inside each letter, so the Mark shows through as a second colour | Signage, vintage print | Shopfront style titles, menus, labels |
| **Cut** | Words cut out of a solid plate | Stencil, paper craft | Bold covers, sale posts, one word statements |
| **Extrude** | Deep letters with sides in the Mark's colours | Solid, sculptural, retro | Event titles, launches, YouTube thumbnails |
| **Double** | Open letters drawn twice, slightly apart | Echo, movement, fashion | Editorial covers, music, nightlife |
| **Trail** | Outlines trailing behind the letters, with a trail colour you can set | Speed, motion, the 1970s | Sport, countdowns, energetic stories |
| **Riso** | Two inks slightly out of register, with a grainy stipple | Risograph zines, indie print | Posters, zines, bakeries, bookshops |
| **Halo** | A soft light in the Mark's colour around the letters | Neon, dusk, dreamy | Decoration only, never as a readability fix |

The eight treatments. Each is drawn from the Mark's palette, so changing the Mark recolours the lettering with it.

## Contour, Cut and Extrude: lettering with its own contrast

These three build a strong edge into the letters, which is why they hold up on lively Marks. **Contour** rings the words with lines like a relief map, so the lettering seems to rise out of the background. **Cut** sets the words as shapes cut out of a solid plate, which reads as confident and graphic. **Extrude** gives each letter depth, drawn in the Mark's colours, the classic look for a launch title or a thumbnail.

A portrait poster with the single word Solstice set very large on a warm gradient Mark

One word, very large: the scale Contour and Extrude are made for.

The same Solstice design as an event poster, with the title large and plain supporting details below

The treated title at the top, with plain details underneath. Only the title gets the effect.

If you want to know how extruded and outlined type work in general, [3D text effects](https://gradiently.design/guide/3d-text-effect) and [outline text](https://gradiently.design/guide/outline-text) explain the craft behind them.

## Inline, Double and Riso: the print and editorial family

**Inline** carves a single line inside each letter, and because the line shows the Mark itself, the background becomes the lettering's second colour. It suits heavy, wide typefaces best, where there is room inside the stroke. **Double** draws open letters twice, slightly offset, for an echo that feels like fashion or music print. **Riso** imitates a risograph: two inks that don't quite line up and a grainy stipple, perfect for anything that should feel hand printed.

> **Match the treatment to the typeface** Inline and Cut need thick strokes, so pair them with a heavy display face. Double and Trail look best on open, simple letters. Riso forgives almost any typeface, which makes it a safe first try.

## Trail and Halo: motion and mood

**Trail** repeats a word's outline behind it, like letters leaving a wake. You can set the trail colour, and it reads as speed: good for sport, countdowns and anything that should feel like it is moving even in a still image. **Halo** surrounds the letters with a soft light in the Mark's colour. It is purely decorative, a mood rather than a tool, and never a way to rescue hard to read text. If a line struggles to read, raise the Mark's reaction level or let [Auto ink](https://gradiently.design/guide/auto-ink-legibility) pick the other ink instead.

## Choosing a lettering effect for the job

| You are making | Try first | Then try |
| --- | --- | --- |
| A gig or festival poster | Contour | Riso |
| A product launch post | Extrude | Cut |
| A café or bakery menu title | Inline | Riso |
| A YouTube thumbnail | Extrude | Cut |
| A magazine style cover or carousel opener | Double | Inline |
| A countdown or sports story | Trail | Extrude |
| A zine or bookshop poster | Riso | Double |

Starting points, not rules. Try two, look at both at the size people will actually see them, and keep the one that reads first.

### Avoid

- A treatment on body text or small details
- Two different treatments in one design
- Long headlines of eight words or more
- Halo used to make a weak line readable

### Do

- One treatment on one or two display words
- Plain, well spaced supporting text
- Heavy typefaces for Inline and Cut
- Check it on the phone, at the real size

## How to add a lettering effect in the Studio

1. **Select the text** Choose the headline or word you want to treat. Keep everything else as plain type.
2. **Choose a treatment** Pick one of the eight lettering treatments. It draws instantly in the colours of the design's Mark.
3. **Adjust the type** Go heavier or wider if the effect looks crowded, and add a little letter spacing for Double and Trail.
4. **Try another Mark** Swap the Mark and watch the lettering recolour with it. This is the quickest way to judge a treatment.
5. **Check every size** Resize to a story or thumbnail and make sure the treated word still reads at that scale.

## Lettering effects in CSS, for the web

If you need a similar look on a website, two of these translate cleanly to CSS: an outline in the spirit of Double, and a stepped extrusion. Both use real text, so they stay selectable and 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;
}
```

Hard edged shadows with no blur build depth rather than a glow. `-webkit-text-stroke` is supported in all current browsers; see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke).

For the wider family of effects, including the ones that don't translate well to the web, see [text effects](https://gradiently.design/guide/text-effects). And if you are deciding whether you need lettering at all, [lettering vs typography](https://gradiently.design/guide/lettering-vs-typography) is a useful read.

## FAQ

### What lettering effects does Gradiently have?

Eight: Contour, Inline, Cut, Extrude, Double, Trail, Riso and Halo, each drawn in the colours of the design's Mark.

### Can I use lettering effects on body text?

It is best not to. Treatments are made for short display words; plain type keeps longer text easy to read.

### Which lettering effect is best for a poster?

Contour, Extrude and Riso are strong poster choices. Contour and Extrude carry their own contrast, and Riso gives a printed feel.

### Do lettering effects change colour with the Mark?

Yes. Every treatment is drawn from the Mark's palette, so swapping the Mark recolours the lettering.

### Should I use Halo to make text easier to read?

No. Halo is decorative. For readability, raise the Mark's reaction level or let Auto ink choose the other ink.