행간 계산기 (Line Height)
피그마 px·% 행간을 입력하면 바로 CSS 비율·%·em 값으로 바꿉니다.
시안의 Line height가 px일 때
시안의 Line height가 %일 때
line-height 값이 실제 몇 px인지
미리보기
마지막으로 입력한 값이 적용됩니다.
행간은 글줄 사이의 간격입니다. 본문은 보통 글자 크기의 1.5~1.7배가 읽기 편하고, 제목은 1.2~1.3배 정도로 좁게 잡습니다. 단위 없는 값으로 지정하면 자식 요소의 글자 크기가 달라져도 비율이 그대로 유지됩니다.
line-height: 1.5;
행간(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 값을 확인한 뒤 이 계산기로 비율을 구해서 적용하세요.