본문 텍스트의 적정 line-height는?

본문 텍스트는 1.5~1.7 범위가 적정하며, 16px 폰트 기준 약 25px 내외가 가장 많이 사용됩니다.

제목(Heading)의 line-height를 낮게 설정하는 이유는?

폰트 크기가 크면 줄 간격이 이미 넓어 보이므로 1.1~1.3 정도로 설정해야 제목이 하나의 덩어리처럼 보입니다.

단위 없는 숫자(예: 1.6)가 권장됩니다. 자식 요소에 상속될 때 폰트 크기에 비례하여 자동 계산됩니다.

폰트 크기·사용 목적으로 최적 line-height 값 계산

폰트 크기 (px)

콘텐츠 유형

폰트 크기(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 정도로 설정해야 제목이 하나의 덩어리처럼 보이는 시각적 효과를 낼 수 있습니다.