PX to VW

행간(Line Height) 계산 가이드: 가독성의 핵심

행간 계산기는 디자인 시안에 적힌 행간(px)을 CSS line-height 값으로 변환해주는 도구입니다. 폰트 크기와 행간만 입력하면 단위 없는 비율, %, em 세 가지 형태로 즉시 계산됩니다.

1. 변환 공식

• 비율(권장): 행간 px ÷ 폰트 크기 px. 예: 24 ÷ 16 = line-height: 1.5
• %: 비율 × 100. 예: line-height: 150%
• em: 비율과 같은 숫자. 예: line-height: 1.5em

2. 왜 단위 없는 값을 권장하나요?

단위 없는 값은 '비율'이 그대로 자식 요소에 상속되어, 자식의 폰트 크기 기준으로 다시 계산됩니다. 반면 em이나 %는 '계산이 끝난 픽셀 값'이 상속되기 때문에, 폰트 크기가 다른 자식 요소에서 줄간격이 어긋나는 버그의 원인이 됩니다. 특별한 이유가 없다면 line-height: 1.5처럼 단위 없이 쓰는 것이 안전합니다.

3. 상황별 권장 행간

• 본문: 1.5 ~ 1.7 (WCAG 접근성 지침도 1.5 이상 권장)
• 제목: 1.1 ~ 1.3 (크기가 클수록 좁게)
• 버튼/라벨: 1 ~ 1.2 (한 줄 텍스트는 좁아도 무방)
• 캡션/작은 글씨: 1.4 ~ 1.6

4. 피그마 시안에서 행간 옮기기

피그마의 텍스트 패널에는 행간이 px 또는 %로 표시됩니다. px로 표시된 경우 이 계산기에 폰트 크기와 함께 입력하면 CSS 값을 얻을 수 있습니다. Auto로 설정된 경우 폰트에 내장된 기본값(대략 1.2배 전후)이 사용되므로, 정확한 재현이 필요하면 디자이너에게 명시적인 행간 값을 요청하는 것이 좋습니다.

자주 묻는 질문 (FAQ)

Q. line-height는 단위 없는 값이 좋은 이유가 무엇인가요?

단위 없는 값은 비율 자체가 자식 요소에 상속되어 자식의 폰트 크기에 맞게 다시 계산됩니다. em이나 %는 계산된 픽셀 값이 상속되어 줄간격이 어긋나는 문제가 생길 수 있습니다.

Q. 시안의 행간 px를 CSS 값으로 어떻게 변환하나요?

행간(px) ÷ 폰트 크기(px)로 계산합니다. 폰트 16px에 행간 24px이면 line-height: 1.5입니다.

Q. 본문에 적절한 line-height 값은 얼마인가요?

본문은 1.5 ~ 1.7 사이가 적절하며, WCAG 접근성 지침에서도 1.5배 이상을 권장합니다. 제목은 1.1 ~ 1.3 정도로 좁게 설정합니다.

Q. 피그마의 line height auto는 CSS로 어떻게 옮기나요?

Auto 행간은 대략 폰트 크기의 1.2배 전후입니다. 정확한 값이 필요하면 피그마에서 px 값을 확인한 뒤 이 계산기로 비율을 구해서 적용하세요.