드롭캡(Drop Cap)은 텍스트 블록의 첫 번째 글자를 가리킵니다. 주로 문서의 첫 단락(리드 문단)에 사용되며, 지금 읽고 계신 이 문단처럼 나머지 텍스트와 구별되도록 스타일링해 시선을 사로잡습니다. 드롭캡은 타이포그래퍼와 비주얼 디자이너가 독자의 시선을 원하는 지점으로 정확히 이끌기 위해 활용하는 강력한 시각적 장치입니다.
드롭캡을 디자인하는 정해진 방법은 없습니다. 가장 널리 쓰이는 방식은 본문과 동일한 서체를 사용하되 첫 글자의 크기를 눈에 띄게 키우고, 경우에 따라 굵게(bold) 처리하는 것입니다.
이 글의 첫 단락 드롭캡에는 아래 코드를 사용했습니다:
.dropcap {
float: left;
font-size: 6em;
line-height: 0.60;
margin: 0;
margin-left: -0.04em;
padding: .09em .04em 0em 0em;
}단락에 적용하려면 첫 단어의 첫 글자를 <span> 요소로 감싸고 class 속성에 dropcap을 지정하면 됩니다:
<p><span class="dropcap">D</span>rop cap is the first letter in a text block...
</p>주의할 점이 있습니다. 여러분의 문서에 맞는 드롭캡 CSS는 선택한 서체의 구조적 특성, 글자 크기, 줄 높이(line-height) 등 여러 요소에 따라 완전히 달라집니다. 모든 상황에 맞는 단 하나의 CSS 규칙 세트는 존재하지 않으므로, 만족스러운 결과가 나올 때까지 미세하게 조정해 가며 작업해야 합니다.
위 CSS를 템플릿이자 출발점으로 삼고, 드롭캡의 font-size 속성을 늘렸다 줄였다 하며 단락에 딱 맞게 다듬어 보세요. 그래도 정렬이 마음에 들지 않는다면 line-height 값을 살짝 올리거나 내려보고, 마지막으로 margin-top 속성을 조정해 드롭캡을 위아래로 미세하게 이동시켜야 할 수도 있습니다.
드롭캡 스타일의 다양한 변형
제가 선택한 드롭캡 스타일은 수많은 방식 중 하나일 뿐입니다. 드롭캡이 반드시 단락 텍스트와 위아래로 정확히 맞춰 정렬되어야 한다는 규칙은 없습니다. 어떤 디자이너는 드롭캡을 첫 줄 어센더(ascender)보다 살짝 위로 올리고, 어떤 디자이너는 훨씬 크게 올립니다. 반대로 드롭캡을 텍스트 블록 안쪽 깊숙이 넣어 위쪽과 왼쪽에 여백을 넉넉히 확보하는 방식을 선호하는 사람도 있습니다.
때로는 드롭캡에 다른 텍스트 색상이나 배경색을 적용하기도 합니다.
다른 텍스트 색상을 적용한 드롭캡
로렘 입숨(lorem ipsum)은 인쇄, 그래픽, 웹 디자인의 레이아웃 작업에 사용되는 더미 텍스트입니다. 이 문구는 15세기의 익명 활자공이 키케로의 『선악의 극한(De Finibus Bonorum et Malorum)』 일부를 뒤섞어 활자 견본집에 사용한 데서 유래한 것으로 알려져 있습니다.
다른 배경색을 적용한 드롭캡
로렘 입숨(lorem ipsum)은 인쇄, 그래픽, 웹 디자인의 레이아웃 작업에 사용되는 더미 텍스트입니다. 이 문구는 15세기의 익명 활자공이 키케로의 『선악의 극한(De Finibus Bonorum et Malorum)』 일부를 뒤섞어 활자 견본집에 사용한 데서 유래한 것으로 알려져 있습니다.
위 두 예제는 앞서 소개한 dropcap 클래스와 동일한 CSS를 사용하며, 텍스트 색상과 배경색만 다르게 지정했습니다. 두 번째 예제에는 padding-bottom과 margin-right를 약간 추가해 위치를 미세하게 맞췄습니다.
드롭캡은 타이포그래피 강조 도구 중 하나일 뿐이지만, 가장 강렬하게 시선을 끄는 도구이기도 합니다. 따라서 절제해서 사용하는 것이 좋습니다.