px
권장
24.0px
1.5× 비율 — 본문에 적합
황금비
25.9px
φ (1.618) — 조화로운 비율
일반 비율
촘촘하게1.2×
제목, 큰 텍스트
19.2px
약간 촘촘하게1.375×
소제목
22.0px
보통1.5×
본문(권장)
24.0px
여유 있게1.625×
긴 글 읽기
26.0px
넓게2×
큰 텍스트 블록, 접근성
32.0px
미리보기
1.2× line-height
다람쥐 헌 쳇바퀴에 타고파. 여러 글자 크기에서 줄 간격을 확인하세요.
1.5× line-height
다람쥐 헌 쳇바퀴에 타고파. 여러 글자 크기에서 줄 간격을 확인하세요.
2× line-height
다람쥐 헌 쳇바퀴에 타고파. 여러 글자 크기에서 줄 간격을 확인하세요.
줄 높이 계산기란 무엇인가요?
폰트 크기를 기준으로 일반적인 CSS line-height 값을 계산하고 여러 비율의 실시간 미리보기를 비교합니다. px 단위 폰트 크기. 1.2·1.375·1.5·1.625·2 및 1.618 황금비의 px 값과 실시간 텍스트 미리보기.
도구 열기
이 도구가 하는 일
- 입력: px 단위 폰트 크기.
- 설정 및 처리: 폰트 크기를 바꾸고 제목·부제·본문·장문·느슨한 간격·황금비 시작값을 비교합니다.
- 출력: 1.2·1.375·1.5·1.625·2 및 1.618 황금비의 px 값과 실시간 텍스트 미리보기.
사용 방법
- 입력을 추가합니다. px 단위 폰트 크기.
- 설정을 확인합니다. 폰트 크기를 바꾸고 제목·부제·본문·장문·느슨한 간격·황금비 시작값을 비교합니다.
- 결과를 생성·검토·내보냅니다. 1.2·1.375·1.5·1.625·2 및 1.618 황금비의 px 값과 실시간 텍스트 미리보기.
주요 기능
- 입력: px 단위 폰트 크기.
- 설정 및 처리: 폰트 크기를 바꾸고 제목·부제·본문·장문·느슨한 간격·황금비 시작값을 비교합니다.
- 출력: 1.2·1.375·1.5·1.625·2 및 1.618 황금비의 px 값과 실시간 텍스트 미리보기.
활용 사례
- 폰트 크기를 기준으로 일반적인 CSS line-height 값을 계산하고 여러 비율의 실시간 미리보기를 비교합니다.
- 다음 산출물 또는 진단 결과가 필요할 때 사용합니다: 1.2·1.375·1.5·1.625·2 및 1.618 황금비의 px 값과 실시간 텍스트 미리보기.
- 다음 검증된 워크플로 단계 전에 배치합니다: 실제 폰트·너비·언어로 선택한 줄 높이 테스트.
제한 사항과 안전 안내
- 이 비율은 시작점일 뿐 보편적 “최적값”이 아닙니다. WCAG 1.4.12는 사용자가 줄 높이를 최소 1.5배로 바꿔도 콘텐츠가 손실되지 않아야 한다는 뜻이지 모든 기본값을 1.5로 강제하지 않습니다.
문제 해결
- 순수 숫자 값을 입력하고 소수점 구분자, 원본/대상 단위, base 또는 root size, DPI, 허용 범위를 확인하세요.
- 알려진 기준값 하나를 다시 계산한 뒤 가정과 반올림을 비교하고, 목록 변환이나 CSS·인쇄 적용을 진행하세요.
- 이 비율은 시작점일 뿐 보편적 “최적값”이 아닙니다. WCAG 1.4.12는 사용자가 줄 높이를 최소 1.5배로 바꿔도 콘텐츠가 손실되지 않아야 한다는 뜻이지 모든 기본값을 1.5로 강제하지 않습니다.
자주 묻는 질문
줄 높이 계산기란 무엇인가요?
폰트 크기를 기준으로 일반적인 CSS line-height 값을 계산하고 여러 비율의 실시간 미리보기를 비교합니다.
줄 높이 계산기는 어떻게 사용하나요?
요구되는 입력을 추가하고 페이지 설정을 확인한 뒤 복사하거나 다운로드하기 전에 결과를 검증합니다. 예상 출력: 1.2·1.375·1.5·1.625·2 및 1.618 황금비의 px 값과 실시간 텍스트 미리보기.
어떤 입력을 지원하나요?
px 단위 폰트 크기.
어떤 출력을 생성하나요?
1.2·1.375·1.5·1.625·2 및 1.618 황금비의 px 값과 실시간 텍스트 미리보기.
어떤 제한이 있나요?
이 비율은 시작점일 뿐 보편적 “최적값”이 아닙니다. WCAG 1.4.12는 사용자가 줄 높이를 최소 1.5배로 바꿔도 콘텐츠가 손실되지 않아야 한다는 뜻이지 모든 기본값을 1.5로 강제하지 않습니다.
관련 AppKiro 도구
검증된 샘플로 시작하세요
작고 민감하지 않은 샘플로 주요 설정과 출력을 확인한 뒤 실제 워크플로에 적용하세요.
도구 열기