줄 높이 계산기
줄 간격 계산기는 글꼴 크기와 용도(본문, 제목, UI 라벨, 디스플레이)에 맞춰 줄 간격, 자간, 이상적인 문단 최대 너비를 추천하며, 실시간 미리보기와 CSS 출력을 제공합니다.
이 도구 소개
줄 간격 계산기는 글꼴 크기와 용도(본문, 제목, UI 라벨, 디스플레이)에 맞춰 줄 간격, 자간, 이상적인 문단 최대 너비를 추천하며, 실시간 미리보기와 CSS 출력을 제공합니다.
사용 방법
- 글꼴 크기를 픽셀로 입력합니다.
- 스타일을 본문, 제목, UI 라벨, 디스플레이 중에서 선택합니다.
- 미리보기 문단과 네 가지 권장 값을 확인합니다.
- CSS 복사를 눌러 값을 스타일시트에 가져갑니다.
알아두면 좋은 점
- 본문은 줄 간격이 글꼴 크기의 약 1.5–1.6배일 때 편하게 읽힙니다.
- 큰 제목과 디스플레이 텍스트는 1.05–1.2 정도로 줄 간격을 좁혀야 보기 좋습니다.
- 읽기 좋은 줄 길이는 한 줄에 약 45–75자입니다.
- WCAG 1.4.12는 사용자가 줄 간격을 1.5, 자간을 0.12 em으로 설정해도 콘텐츠가 제대로 작동할 것을 요구합니다.
- 단위 없는 line-height 값(예: 1.6)은 각 요소의 글꼴 크기에 비례해 조정됩니다.
모든 처리는 브라우저 안에서 이루어집니다. 입력한 내용은 업로드되거나 저장되지 않습니다.
자주 묻는 질문
본문에 적당한 줄 간격은 얼마인가요?
글꼴 크기의 약 1.5~1.6배입니다. 16 px 텍스트라면 약 24–26 px입니다.
제목은 줄 간격을 더 작게 해야 하나요?
네. 큰 텍스트는 상대적으로 간격이 덜 필요하므로 제목은 보통 1.1–1.3을, 디스플레이 텍스트는 그보다 더 좁게 씁니다.
읽기에 이상적인 줄 길이는 얼마인가요?
한 줄에 약 45–75자이며, 본문에는 약 65자가 이상적이라고 자주 언급됩니다.
CSS에서 단위 없는 line-height를 써야 하나요?
대개 그렇습니다. 1.6 같은 단위 없는 값은 비율로 상속되므로 글꼴 크기가 다른 하위 요소도 비례한 간격을 유지합니다.