Outline text effect: hollow lettering that still reads

The outline text effect shows only the edge of each letter, with the inside left hollow so the background shows through. It reads when three conditions hold: a heavy face with open shapes, a stroke thick enough to read as a line (around 2 to 4 percent of the font size), and a large size with a calm background behind it. The most dependable layout pairs one solid word with one outlined word, so the eye has something firm to read first.

Why outline text is hard to read

We recognise letters by their solid shapes. An outline removes that mass and leaves two thin lines for every stroke, an outer edge and an inner one. At large sizes the eye fills the shape back in. At small sizes, or with a hairline stroke, the two lines blur together or disappear into the background. A busy ground makes it worse, because the hollow interior shows every bit of texture.

Choosing the face and the stroke

Start with weight. A black or extra bold face has wide strokes, so its outline still describes a clear shape. Open letters help too: round counters in O, A and e stay visible instead of closing up. Faces like Archivo Black, Anton or a heavy grotesque are good starting points; bold fonts has more.

Colour matters as much as width. A light stroke on a dark ground reads more easily than a dark stroke on a light one, because light lines appear to spread slightly. Take the stroke colour from the lightest or darkest part of the background so it looks like part of the design. If the background is a gradient, check the stroke where the ground is closest to the stroke colour; that is where the outline will vanish first.

Layouts where outline text works

• Solid and hollow pair: Summer solid, Sessions outlined. The solid word anchors, the outline adds rhythm.
• Repeated word: the same word stacked three or four times, one solid and the rest outlined, for a sense of echo or motion. Retro text effects covers the related double and trail looks.
• Background word: a huge outlined word behind a smaller solid headline, acting as texture rather than text. For depth instead of hollowness, see 3D text effect.
• Outline on hover or second state: on the web, a hollow button or link that fills when selected.

How to make outline text in CSS

The property is -webkit-text-stroke. Despite the prefix, it works in every major browser and is part of the web compatibility standard. Set the text colour to transparent for a hollow word, or keep a fill for a solid letter with an edge. The MDN reference has the details.

.outline {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 1;
  color: #fafaf9; /* fallback: solid letters */
}

@supports (-webkit-text-stroke: 1px black) {
  .outline {
    color: transparent;
    -webkit-text-stroke: 0.03em #fafaf9; /* about 3% of the size */
  }
}

/* Solid and hollow pair */
.outline-pair .solid { color: #fafaf9; }
.outline-pair .hollow {
  color: transparent;
  -webkit-text-stroke: 0.03em #fafaf9;
}

Screen readers read outlined text normally, since it's still real text. Keep it real: don't flatten outline headings into images on a website. Contrast is the remaining risk, because tools measure the text colour, which is now transparent. Check the stroke against the background by eye and with a contrast checker on the stroke colour. Colour contrast and accessibility covers the ratios.

Outer stroke and inline: two related lettering styles

Outline lettering has relatives that keep more of the solid shape. An outer stroke draws a line around the outside of a solid letter, separating it from the background like a sticker edge. An inline cuts a thin line inside each stroke, the look of engraved and Victorian display type, and of many a shop sign. Both read more easily than a fully hollow word, so they're a good choice when the words need to work at smaller sizes. For the wider family of treatments, see text effects.

1. 1

   Pick the word

   One or two words that carry the message, never a sentence.

2. 2

   Set it heavy and large

   A black weight at headline size. Outline lettering is not for body text.

3. 3

   Choose hollow, outer stroke or inline

   Hollow for drama, an outer stroke to lift a word off a busy ground, inline for a crafted, signage feel.

4. 4

   Take the colour from the background

   Use its lightest or darkest tone so the stroke belongs to the design.

5. 5

   Check it on a phone

   View the post at real size. If the outline flickers or disappears, thicken the stroke or fill the word.

Gradiently's Lettering treatments cover this family without building layers by hand: Inline carves a line inside each letter, Double draws open letters twice, Trail leaves outlines trailing behind, and Contour rings the words with elevation lines. Because the Mark behind the design moves its calmest region behind the words, a hollow or inlined headline gets the steady ground it needs. Gradient lettering is a separate technique, covered in gradient text in CSS.