🔠 드롭캡 크기 계산기 | 줄 수 넣고 CSS 바로 복사

본문 글자 크기 (px)

본문 줄 높이 (배수)

드롭캡이 덮을 줄 수

줄

본문 폰트 대문자 높이 비율 (em 대비)

드롭캡 폰트 대문자 높이 비율 (em 대비)

드롭캡 오른쪽 여백 (px, 0 가능)

붙여 쓸 CSS

계산 상세

항목	값

드롭캡 크기는 덮을 줄 수에서 거꾸로 계산합니다. 첫 줄 대문자 위에서 마지막 줄 베이스라인까지의 높이가 (줄 수 − 1) × 줄 높이 + 본문 대문자 높이이고, 드롭캡 폰트 크기는 그 값을 드롭캡 폰트의 대문자 높이 비율로 나눈 값입니다. 권장 줄 수는 제시하지 않습니다 — 공인 기준이 없어 줄 수를 입력으로 받습니다. 대문자 높이 비율도 폰트마다 달라 입력입니다(2026년 10월 기준).

드롭캡 첫글자 강조 크기 계산기 사용법

드롭캡은 첫 글자를 키워 문단 머리를 잡아 주는 장식인데, 크기를 눈대중으로 맞추면 마지막 줄 베이스라인에서 어긋나 아래가 비거나 글자가 삐져나옵니다. 이 계산기는 본문 크기·줄 높이·덮을 줄 수와 두 폰트의 대문자 높이 비율을 받아 드롭캡 폰트 크기와 line-height 를 계산하고, 붙여 쓸 CSS 를 만들어 줍니다.

덮을 높이는 (줄 수 − 1) × 본문 줄 높이 + 본문 대문자 높이입니다. 첫 줄 대문자 위에서 마지막 줄 베이스라인까지의 거리이기 때문입니다. 드롭캡 폰트 크기는 그 높이를 드롭캡 폰트의 대문자 높이 비율로 나눈 값이고, line-height 는 식이 정리되어 그 비율과 같아집니다. 2026년 10월 기준입니다.

권장 줄 수는 제시하지 않습니다. 공인 기준이 없고 판형과 본문 길이에 따라 달라지기 때문입니다. 대문자 높이 비율도 폰트마다 달라 입력으로 받습니다. 폰트의 어센더·디센더 지표와 브라우저의 첫 줄 처리 차이는 넣지 않았으니, 생성한 CSS 를 붙인 뒤 여백을 다듬는 작업은 남습니다. initial-letter 판은 파이어폭스에서 동작하지 않습니다.

자주 묻는 질문

드롭캡은 몇 줄을 덮는 게 좋나요?

이 도구가 정해 주지 않습니다. 권장 줄 수에 공인 기준이 없고 판형·본문 길이·서체에 따라 달라지기 때문입니다. 덮을 줄 수를 직접 넣으면 그 줄 수에 맞는 폰트 크기와 line-height 를 계산합니다.

line-height 가 대문자 높이 비율과 같게 나오는 이유가 뭔가요?

float 로 띄운 첫 글자의 상자 높이는 폰트 크기 × line-height 입니다. 그 높이를 덮을 높이와 같게 맞추면 식이 정리되어 line-height 값이 드롭캡 폰트의 대문자 높이 비율과 똑같아집니다.

initial-letter 만 써도 되나요?

파이어폭스가 지원하지 않습니다. 그래서 float 방식을 기본 코드로 두고 initial-letter 판을 대안으로 함께 내놓습니다. 어느 쪽이든 폰트의 실제 금속 지표에 따라 미세 조정이 필요합니다.

🔠드롭캡 첫글자 강조 크기 계산기

붙여 쓸 CSS

계산 상세

관련된 도구

타이포그래피 자간(Tracking) 설정 가이드

CSS text-shadow 코드 생성기

드롭캡 첫글자 강조 크기 계산기 사용법

자주 묻는 질문

붙여 쓸 CSS

계산 상세

관련된 도구

타이포그래피 자간(Tracking) 설정 가이드

CSS text-shadow 코드 생성기

드롭캡 첫글자 강조 크기 계산기 사용법

자주 묻는 질문

같은 카테고리 도구