폰트 사이즈를 입력하면 가독성이 좋은 권장 자간·행간을 자동 계산합니다. 미리보기로 결과를 확인하세요.
디자인 시안에서 가장 중요한 것은 가독성입니다. 본문 텍스트의 행간과 자간을 적절히 설정하면 사용자가 글을 더 편하게 읽을 수 있고, 페이지에 머무는 시간도 길어집니다. The quick brown fox jumps over the lazy dog. 한 단락 안에서도 글자 간격은 일관성 있게 유지되어야 시각적으로 자연스러워 보입니다.
CSS 코드
자간·행간 계산기 사용법
- 폰트 사이즈를 슬라이더로 설정합니다.
- 용도(본문/제목/디스플레이/캡션)와 언어를 선택합니다.
- 권장 자간·행간이 자동으로 계산되어 미리보기에 적용됩니다.
- 슬라이더로 미세 조정 가능합니다.
- 복사 버튼으로 CSS 코드를 가져갑니다.
주요 기능
- 용도별·언어별 권장 자간·행간 자동 계산
- 실시간 미리보기 (한·영 혼합 텍스트)
- 슬라이더로 미세 조정
- CSS letter-spacing + line-height 코드 자동 생성
활용 예시
- 본문 가독성 최적화 (블로그·기사)
- 큰 제목의 시각적 균형
- 한글 본문의 자연스러운 줄 간격
- 디자인 시스템의 타이포 토큰 결정
한글 vs 영문 차이
한글은 영문보다 글자가 정사각형에 가까워 좁은 자간(0 또는 -0.01em)이 자연스럽습니다. 영문은 약간 넓은 자간이 가독성을 높이며, 행간은 한글 1.6~1.8, 영문 1.4~1.6이 일반적입니다.
자주 묻는 질문
line-height 단위는 무엇이 좋나요?
단위 없는 숫자(예: line-height: 1.5)가 권장됩니다. 폰트 사이즈에 비례해 자동 조정되어 중첩 요소에서도 일관됩니다.
letter-spacing이 음수일 때는 언제 쓰나요?
큰 디스플레이 텍스트(40px+)는 자간이 너무 넓어 보일 수 있어 -0.01~-0.03em 정도 줄이면 더 단단해 보입니다. 작은 텍스트에는 음수를 쓰지 마세요.
한글 폰트마다 권장값이 다른가요?
네, Pretendard·SUIT 같은 모던 폰트는 본문 1.6, 제목 1.3 정도가 자연스럽고, 나눔고딕·맑은고딕은 1.7 이상이 더 시원합니다. 본 도구는 평균값을 제공합니다.
행간이 너무 넓으면 어떤 문제?
줄 사이가 너무 멀면 한 줄을 읽고 다음 줄로 시선이 이동하기 어려워집니다. 본문 1.4~1.8, 제목 1.1~1.3 범위를 벗어나지 않는 것이 안전합니다.