Hollow type with only the outline visible. Hover the big headline below — it fills with color. Three CSS variations: stroke-only, double offset, color-on-hover.
Outline type uses CSS -webkit-text-stroke + color: transparent to render text as just its silhouette. Great for huge display headlines where filled type would feel overwhelming — and reliably opens up the kind of "minus-design" hero hierarchy you see on agency sites and editorial covers. Hover variants that fill the type with color are especially common on portfolio links and section titles.
Two properties: color: transparent hides the fill, and -webkit-text-stroke: 2px white draws the outline. Browser support is excellent (it's been in WebKit/Blink for years and is unprefixed in Firefox via text-stroke). On hover, transition both color and -webkit-text-stroke-color for the fill effect. Three popular variations: pure stroke-only, stroke + filled (offset duplicate text via text-shadow), and color-fill on hover.
Hover the giant headline — it fills with amber. The three smaller cards show variations.
Build a hero with HUGE outline-only display type. Background near-black with a soft accent radial glow. Headline: font-size clamp(72px, 14vw, 180px), font-weight 800, letter-spacing -0.06em, line-height 0.85. Apply color:transparent and -webkit-text-stroke:2px #F2EFE7 (the off-white) AND text-stroke:2px for non-Webkit. Add transition:color 0.35s ease, -webkit-text-stroke-color 0.35s ease. On :hover, change color and -webkit-text-stroke-color to the accent — the type fills with color. Mark one italic word inside the headline as a separate em with NO stroke and a filled accent color, so it pops against the outlined siblings. Below, show 3 small variant cards: (1) "Stroke only" — basic 1.5px outline; (2) "Offset chromatic" — color:white + text-shadow:-1.5px -1.5px 0 hot-pink, 1.5px 1.5px 0 cyan for a VHS chromatic-aberration look; (3) "Fill on hover" — outline by default, fills on :hover via transition. Each card labeled with its CSS technique.