Design Atlas
한국어
Aa Typography

Drop cap

드롭캡

An enlarged first letter that spans several lines of the paragraph below it, marking where a chapter or section begins.

Also known as: 대문자 장식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)}}

Rooted in the illuminated initials of medieval manuscripts, drop caps carried through the print era and still mark the start of a section in magazine and editorial layouts today.

The classic CSS approach applies `float: left` and a large `font-size` to the `::first-letter` pseudo-element — still the most broadly supported technique. The newer `initial-letter` property has uneven browser support, so many sites keep the float method as a fallback.

How many lines the letter spans (its "sink") is tuned via `font-size` and `line-height`. A little `padding` next to the drop cap keeps the adjacent body lines from butting up against it awkwardly.

When to use

Best for the opening paragraph of an article, blog post, or magazine layout. Overkill for short UI copy or card descriptions that don't need to feel like a chapter opening.