# Outline text effect: hollow lettering that still reads

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

Hollow letters look sharp on a poster and vanish on a phone more often than any other effect. Here is how to choose the face, the stroke and the layout so they hold, with CSS that works in every browser.

## The short version

- The outline text effect draws only the edge of each letter, leaving the inside hollow so the background shows through.
- Outline text reads best in a heavy sans or slab face with open shapes, set large, with a stroke about 2 to 4 percent of the font size.
- Pairing one outlined word with one solid word gives the reader an anchor and keeps the outline as rhythm rather than the whole message.
- In CSS, outline text is made with -webkit-text-stroke and a transparent colour, which every major browser supports.
- Avoid outlining small text, thin weights or script faces, because thin strokes are the first thing a phone screen loses.

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.

### Fails

- Light or regular weights
- Hairline strokes under 1 percent of the size
- Script or high contrast serif faces
- Whole sentences outlined
- Small text under about 60 px on a post
- A detailed photo showing through the letters

### Holds

- Black, heavy or extra bold weights
- Strokes around 2 to 4 percent of the size
- Sturdy sans, slab or grotesque faces
- One or two words, the rest solid
- Headline sizes, 120 px and up on a post
- A calm gradient or flat colour behind

## 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](https://gradiently.design/guide/bold-fonts) has more.

| Font size | Stroke width | Use |
| --- | --- | --- |
| 60 px | 2 px | The smallest a hollow word should go, and only on a flat ground |
| 120 px | 3 to 4 px | Social post headlines at 1080 px wide |
| 200 px | 5 to 7 px | Big single words and poster lines |
| 400 px | 10 to 14 px | Oversized background words and banners |

Stroke widths at roughly 2 to 4 percent of the font size. Go thicker on light weights; go thinner only if letters start to clog.

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](https://gradiently.design/guide/retro-text-effect) 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](https://gradiently.design/guide/3d-text-effect).
- **Outline on hover or second state**: on the web, a hollow button or link that fills when selected.

A portrait post with the word Sessions very large and a small eyebrow reading Summer above it

One big word, the shape outline lettering suits: short and heavy, with small solid details beneath.

A vertical story for a summer music series with the word Sessions as the headline

The same word on a story. The tall frame leaves room to repeat it down the page, one solid copy and the rest hollow.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke) has the details.

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

An `em` stroke scales with the font size. The `@supports` block keeps solid letters where the property isn't available.

> **The stroke eats into the letter** CSS draws the stroke centred on the letter's edge, so half of it falls inside. Thick strokes on a filled word make it look thinner and can close small counters. In SVG, `paint-order: stroke` draws the stroke behind the fill and avoids this.

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](https://gradiently.design/guide/color-contrast-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](https://gradiently.design/guide/text-effects).

1. **Pick the word** One or two words that carry the message, never a sentence.
2. **Set it heavy and large** A black weight at headline size. Outline lettering is not for body text.
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. **Take the colour from the background** Use its lightest or darkest tone so the stroke belongs to the design.
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](https://gradiently.design/guide/css-gradient-text).

## FAQ

### How do I make outline text in CSS?

Set `color: transparent` and `-webkit-text-stroke: 0.03em #ffffff` on the text. The prefixed property works in all major browsers.

### What font is best for outline text?

A heavy sans or slab with open shapes, such as Archivo Black or Anton. Thin weights and scripts fall apart when outlined.

### How thick should a text outline be?

About 2 to 4 percent of the font size: around 3 to 4 px for a 120 px headline.

### Is outline text accessible?

It's read normally by screen readers, but it can fail on contrast. Use it only for large words and check the stroke colour against the background.