CSS line-height — 줄 간격 완전 정리

 

 

Web Development · CSS Text

CSS line-height —
줄 간격 완전 정리

가독성을 결정하는 가장 중요한 한 가지 속성

.big-line { line-height: 2; } .small-line { line-height: 0.7; }

0.7 — 줄 사이가 너무 좁아 답답. 줄이 겹쳐 보임. 가독성이 매우 나쁘다.

1.6 — 본문에 적절한 줄 간격. 한 줄과 다음 줄이 명확히 구분되면서도 너무 떨어지지 않음.

2.2 — 너무 떨어져 어색. 시선이 다음 줄로 자연스럽게 흘러가지 않음.

---

1 단위 — 비율(권장) vs px

방식	예	특징
비율 (단위 없음)	1.6	폰트 크기의 1.6배 — 권장
%	160%	비율과 거의 동일
em	1.6em	비슷하지만 자식 누적
px	24px	고정 — 폰트 변경 시 어색

※ 단위 없는 비율(1.6)이 표준. 자식 요소가 다른 폰트 크기를 가져도 자연스럽게 비율이 적용됨.

반응형

---

2 권장 값

대상	권장 line-height
본문 단락	1.6 ~ 1.8
제목	1.2 ~ 1.4
코드 블록	1.4 ~ 1.6
아주 작은 글씨	1.0 ~ 1.2

---

핵심 한 줄 요약

line-height한 줄의 위아래 여유 공간

단위 없는 비율1.6 같은 형식이 권장

본문 표준1.6 ~ 1.8

제목1.2 ~ 1.4 (좁게)

가독성디자인 핵심 — 첫 번째로 신경 쓸 것

Tags

#line-height #줄간격 #가독성 #font-size #CSS #HTML #p #텍스트 #비율 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

line-height, 줄간격, 가독성, font-size, CSS, HTML, p, 텍스트, 비율, 웹개발, 티스토리