텍스트 스트로크

Text stroke

글자를 채우지 않고 윤곽선만 그리거나, 채우기와 윤곽선을 함께 쓰는 기법.

다른 이름: 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: 두께 색 으로 윤곽선을 그립니다. color: transparent 와 함께 쓰면 속이 빈 아웃라인 글자가 되고, 배경 위에 큰 제목으로 얹으면 뒤 배경이 글자 모양대로 비칩니다.

SVG 텍스트의 stroke/fill 속성으로 같은 효과를 더 정교하게(선 정렬, 대시 패턴 등) 만들 수도 있습니다.

언제 쓰나

이미지 위 대형 헤드라인, 브루탈리즘 타이포에 씁니다. 얇은 두께·저해상도에서는 안티앨리어싱이 깨져 보일 수 있어 굵은 산세리프에 적합합니다.