텍스트 줄 간격 최적화 계산기 사용법
폰트 크기(px)와 콘텐츠 유형을 입력하면 최적의 line-height 비율과 픽셀값을 계산합니다. 본문 텍스트는 1.5~1.7, 제목은 1.1~1.3, 버튼·라벨 등 UI 요소는 1.0~1.2, 코드 블록은 1.4~1.6이 적정 범위입니다.
line-height가 너무 좁으면 글자가 붙어 보여 가독성이 떨어지고, 너무 넓으면 문단이 분절된 느낌을 줍니다. 16px 폰트의 본문 텍스트라면 line-height: 1.6(= 25.6px)이 가장 많이 사용됩니다.
CSS에서는 line-height에 단위 없는 숫자(예: 1.6)를 사용하는 것이 권장됩니다. px 값을 직접 쓰면 자식 요소가 상속할 때 의도치 않은 크기가 적용될 수 있습니다.
자주 묻는 질문
line-height에 단위를 써야 하나요?
CSS에서는 단위 없는 숫자(예: line-height: 1.6)를 권장합니다. 자식 요소가 상속할 때 폰트 크기에 비례하여 자동 계산되기 때문입니다.
모바일에서는 line-height를 다르게 설정해야 하나요?
화면이 좁을수록 긴 줄이 자주 줄바꿈되므로 본문은 1.6~1.7, 모바일 전용 레이아웃에서는 1.5 정도도 충분합니다.
제목(Heading)의 line-height가 낮은 이유는?
제목은 폰트 크기가 크기 때문에 줄 간격이 넓어 보입니다. 1.1~1.3 정도로 설정해야 제목이 하나의 덩어리처럼 보이는 시각적 효과를 낼 수 있습니다.