line-height
텍스트 줄 사이의 수직 간격을 설정합니다. 단위 없는 값을 사용하면 font-size에 비례하여 자동 조절되므로, 대부분의 경우 단위 없는 값을 권장합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
lh1 | line-height: 1 | 줄 간격 없음. 버튼, 뱃지 등 단일 줄 요소에 사용 |
lh1-2 | line-height: 1.2 | 좁은 줄 간격. 큰 제목에 적합 |
lh1-3 | line-height: 1.3 | 약간 좁은 줄 간격. 소제목에 적합 |
lh1-5 | line-height: 1.5 | 표준 줄 간격. 대부분의 텍스트에 적합 |
lh1-7 | line-height: 1.7 | 넓은 줄 간격. 긴 본문에 가독성 향상 |
lh2 | line-height: 2 | 매우 넓은 줄 간격. 읽기 학습용, 넓은 여백 필요 시 |
lh20px | line-height: 20px | 고정 20px 줄 간격 |
lh24px | line-height: 24px | 고정 24px 줄 간격 |
lh2rem | line-height: 2rem (20px) | 고정 20px (rem 단위) |
시각적 비교
같은 텍스트에 서로 다른 line-height를 적용한 결과를 비교합니다.
line-height: 1 — lh1
The quick brown fox jumps over the lazy dog. 다람쥐 헌 쳇바퀴에 타고파. 줄 간격이 텍스트의 가독성에 큰 영향을 미칩니다. 적절한 line-height는 읽기 편안함을 결정하는 핵심 요소입니다.
line-height: 1.3 — lh1-3
The quick brown fox jumps over the lazy dog. 다람쥐 헌 쳇바퀴에 타고파. 줄 간격이 텍스트의 가독성에 큰 영향을 미칩니다. 적절한 line-height는 읽기 편안함을 결정하는 핵심 요소입니다.
line-height: 1.5 — lh1-5
The quick brown fox jumps over the lazy dog. 다람쥐 헌 쳇바퀴에 타고파. 줄 간격이 텍스트의 가독성에 큰 영향을 미칩니다. 적절한 line-height는 읽기 편안함을 결정하는 핵심 요소입니다.
line-height: 1.7 — lh1-7
The quick brown fox jumps over the lazy dog. 다람쥐 헌 쳇바퀴에 타고파. 줄 간격이 텍스트의 가독성에 큰 영향을 미칩니다. 적절한 line-height는 읽기 편안함을 결정하는 핵심 요소입니다.
line-height: 2 — lh2
The quick brown fox jumps over the lazy dog. 다람쥐 헌 쳇바퀴에 타고파. 줄 간격이 텍스트의 가독성에 큰 영향을 미칩니다. 적절한 line-height는 읽기 편안함을 결정하는 핵심 요소입니다.
Unitless vs Unit 비교
단위 없는 값은 font-size에 비례하여 자동으로 조절됩니다. 단위가 있는 값은 고정되어 font-size가 바뀌어도 줄 간격이 동일합니다.
Unitless (상대값) — lh1-5
font-size: 14px일 때 line-height는 21px (14 x 1.5)
font-size: 20px일 때 line-height는 30px (20 x 1.5)
font-size에 비례하여 자동 조절됩니다
Unit (고정값) — lh24px
font-size: 14px일 때 line-height는 24px (고정)
font-size: 20px일 때 line-height는 24px (고정, 겹침 발생)
font-size와 무관하게 고정되어 큰 텍스트에서 줄이 겹칠 수 있습니다
<!-- 단위 없는 값 (권장) — font-size에 비례 -->
<p class="fs14px lh1-5">14px 기준 → 줄 간격 21px</p>
<p class="fs2rem lh1-5">20px 기준 → 줄 간격 30px</p>
<!-- 단위 있는 값 (고정) — font-size와 무관 -->
<p class="fs14px lh24px">14px 기준 → 줄 간격 24px (고정)</p>
<p class="fs2rem lh24px">20px 기준 → 줄 간격 24px (고정, 겹칠 수 있음)</p>
<!-- rem 단위 -->
<p class="fs16px lh2rem">줄 간격 2rem = 20px (고정)</p>권장 값
용도에 따라 적절한 line-height 값을 선택하세요.
| 용도 | 권장 클래스 | 설명 |
|---|---|---|
| 본문 텍스트 | lh1-5 ~ lh1-7 | 가독성이 가장 좋은 범위. 한글은 lh1-7 권장 |
| 제목 (h1~h3) | lh1-2 ~ lh1-3 | 큰 글씨는 좁은 간격이 시각적으로 안정적 |
| 버튼, 뱃지, 네비 | lh1 | 단일 줄 요소는 줄 간격 불필요 |
| UI 라벨, 캡션 | lh1-3 ~ lh1-5 | 짧은 텍스트에 적당한 간격 |
| 넓은 여백 본문 | lh2 | 읽기 학습, 법률 문서 등 특수 용도 |
실제 사용 예시
본문 텍스트 — lh1-7
긴 본문 텍스트에는 lh1-5 ~ lh1-7을 사용하세요. 줄 간격이 넉넉하면 긴 문장도 편안하게 읽을 수 있습니다. 특히 한글은 영문보다 글자 높이가 균일하므로 약간 넓은 줄 간격이 가독성에 도움이 됩니다.
제목 — lh1-2
큰 제목에는 좁은 줄 간격을 사용합니다
버튼 / 단일 줄 — lh1
<!-- 본문 텍스트 -->
<p class="fs16px lh1-7 c71717A">
긴 본문 텍스트에는 lh1-7을 사용하세요.
</p>
<!-- 제목 -->
<h1 class="fs3-6rem fw800 lh1-2">
큰 제목에는 좁은 줄 간격
</h1>
<!-- 버튼 (단일 줄) -->
<button class="fs14px lh1 py8px px16px bg6366F1 cFFFFFF br8px bn cp">
Button
</button>
<!-- 카드 본문 -->
<div class="bg18181B p2rem br8px">
<h3 class="fs2rem fw700 lh1-3 cFAFAFA mb8px">카드 제목</h3>
<p class="fs14px lh1-7 c71717A">카드 본문 내용입니다.</p>
</div>팁 & 주의사항
단위 없는 값을 권장합니다
단위 없는 line-height는 font-size에 비례하여 자동 조절됩니다. lh1-5는 font-size가 14px이든 20px이든 항상 적절한 비율을 유지합니다.
lh1은 단일 줄 요소에 최적
버튼, 뱃지, 네비게이션 항목 등 한 줄짜리 요소에 lh1을 사용하면 상하 여백이 정확히 맞습니다.
가독성을 위한 lh1-5 ~ lh1-7
본문 텍스트에는 lh1-5 ~ lh1-7을 사용하세요. 줄 간격이 좁으면 읽기 피로가 커지고, 너무 넓으면 텍스트가 흩어져 보입니다.
고정 단위 사용 시 주의
lh24px처럼 고정값을 사용하면 font-size가 line-height보다 클 때 줄이 겹칩니다. 고정값은 font-size가 확정된 경우에만 사용하세요.