Text stroke

텍스트 스트로크

Drawing only a glyph’s outline instead of filling it — or combining a fill with a stroke.

Also known as: Outline text-webkit-text-stroke

···

html

<div class="stage"><h1 class="tx" id="tx">STROKE</h1></div>

css

.stage{background:linear-gradient(135deg,#5b5bf7,#ff5c8a 60%,#ffb648);padding:30px 26px;border-radius:16px;
  display:grid;place-items:center}
h1.tx{margin:0;font-size:clamp(28px,7vmin,42px);font-weight:800;color:#fff;letter-spacing:.02em;
  -webkit-text-stroke:0px transparent;transition:color .6s,-webkit-text-stroke .6s}
h1.tx.outline{color:transparent;-webkit-text-stroke:2px #fff}

const tx = document.getElementById('tx');
setInterval(() => tx.classList.toggle('outline'), 1800);

-webkit-text-stroke: width color draws the outline. Combined with color: transparent it becomes hollow outline type, and placed as a big headline over a background it lets whatever's behind show through the letterforms.

The same effect can be built more precisely with SVG text's stroke/fill attributes (stroke alignment, dash patterns, and so on).

When to use

Use for large headlines over an image, brutalist typography. Thin strokes at low resolution can look jagged — suits bold sans-serifs best.