디자인 아틀라스
EN
✦ 시각 효과

레터프레스(음각) 텍스트

Letterpress text

글자가 표면에 살짝 눌려 새겨진 것처럼 보이게 하는 아주 옅은 이중 그림자 기법. 초기 iOS·macOS 텍스트에서 흔히 봤습니다.

다른 이름: Embossed textDebossed textInset text shadow
···
html
<div class="panel"><span class="word" id="w">PRESS</span><small id="cap">pressed</small></div>
css
.panel{display:grid;place-items:center;gap:10px;background:#dfe3ea;padding:34px 46px;border-radius:18px}
.word{font-size:clamp(24px,7vmin,34px);font-weight:800;color:#dfe3ea;letter-spacing:.02em;
  font-family:Arial,Helvetica,sans-serif;transition:text-shadow .6s;
  text-shadow:0 1.5px 1px rgba(255,255,255,1),0 -1.5px 1px rgba(0,0,0,.4)}
.word.raised{text-shadow:0 -1.5px 1px rgba(255,255,255,1),0 1.5px 1px rgba(0,0,0,.4)}
#cap{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#6b7280;
  letter-spacing:.08em;text-transform:uppercase}
js
const w = document.getElementById('w');
const cap = document.getElementById('cap');
setInterval(() => {
  w.classList.toggle('raised');
  cap.textContent = w.classList.contains('raised') ? 'raised' : 'pressed';
}, 2200);

텍스트 색과 배경색이 비슷할 때, text-shadow 를 밝은 색으로 아래쪽에 1px, 어두운 색으로 위쪽에 1px 주면 글자 아래쪽 모서리는 빛을 받고 위쪽 모서리는 그늘진 것처럼 보여 "눌려 새겨진" 인상을 줍니다.

뉴모피즘의 "튀어나온" 느낌과 정반대이고, 아주 미세하게(그림자 1px, 낮은 불투명도) 써야 자연스럽습니다 — 크게 쓰면 그냥 흐릿한 이중 그림자로 보입니다.

언제 쓰나

같은 색조의 배경 위 헤더, 스큐어모픽 UI 복각, 카드 라벨에 씁니다. 다크모드에서는 밝음/어두움 순서를 뒤집어야 자연스럽습니다.