디자인 아틀라스
EN
Aa 타이포그래피

드롭캡

Drop cap

문단의 첫 글자를 몇 줄에 걸쳐 크게 키워 시작을 표시하는 오랜 인쇄 전통.

다른 이름: 대문자 장식Initial letter
···
html
<div class="stage">
  <p id="p"><span class="drop">D</span>rop caps mark the start of a chapter or section — a large first letter spanning several lines below it. 첫 글자를 크게 키워 시작을 알리는 오랜 인쇄 전통입니다.</p>
</div>
css
.stage{width:min(90%,480px)}
p{font-size:14px;line-height:1.55;color:var(--fg);margin:0;text-align:left;font-family:Georgia,'Times New Roman',serif}
.drop{float:left;font:700 3.4em/.78 Georgia,'Times New Roman',serif;padding:.02em .07em 0 0;color:var(--accent);animation:pop 2.4s ease-in-out infinite}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

중세 필사본의 채색 머리글자(illuminated initial)에서 시작된 장식으로, 인쇄 시대를 거쳐 지금도 잡지·에디토리얼 레이아웃에서 문단 시작을 알리는 장치로 쓰입니다.

CSS에서는 `::first-letter` 가상 요소에 `float: left`와 큰 `font-size`를 주는 고전적인 방식이 가장 폭넓게 동작합니다. 최신 표준인 `initial-letter` 속성은 브라우저 지원이 아직 고르지 않아 float 방식을 폴백으로 함께 쓰는 경우가 많습니다.

글자가 몇 줄에 걸치는지(sink)는 `font-size`와 `line-height`로 조절합니다. 드롭캡 옆 본문 줄이 어색하게 끊기지 않도록 `padding`으로 여백을 살짝 주는 게 좋습니다.

언제 쓰나

잡지·블로그·아티클의 첫 문단에. 짧은 UI 텍스트나 카드 설명처럼 "장을 여는" 느낌이 필요 없는 곳엔 과합니다.