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

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

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.

If you want to know how extruded and outlined type work in general, 3D text effects and 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.

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 pick the other ink instead.

Choosing a lettering effect for the job

How to add a lettering effect in the Studio

1. 1

   Select the text

   Choose the headline or word you want to treat. Keep everything else as plain type.

2. 2

   Choose a treatment

   Pick one of the eight lettering treatments. It draws instantly in the colours of the design's Mark.

3. 3

   Adjust the type

   Go heavier or wider if the effect looks crowded, and add a little letter spacing for Double and Trail.

4. 4

   Try another Mark

   Swap the Mark and watch the lettering recolour with it. This is the quickest way to judge a treatment.

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

/* 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;
}

For the wider family of effects, including the ones that don't translate well to the web, see text effects. And if you are deciding whether you need lettering at all, lettering vs typography is a useful read.