테스트 사이트 - 개발 중인 베타 버전입니다

line-height 정리만 잘해도 디자인 완성도가 올라간다

· 4개월 전 · 284

라인 높이는 단순히 “글씨를 넓게 보이게” 하는 게 아니라
전체 레이아웃의 수직 리듬을 만드는 핵심 요소입니다.

일관된 line-height는 가독성 향상뿐만 아니라
여백이 정갈해지고 눈의 피로도도 줄어듭니다.

 

기본 body 텍스트에는 line-height: 1.5 또는 150%가 가장 적절

헤딩(제목)에는 크기에 비례해 조금 줄여서 1.2~1.4 추천

Figma나 CSS에서 숫자값(line-height: 24px)으로 고정하면 그리드 정렬이 쉬움

같은 line-height 값 그룹끼리 컴포넌트를 묶어두면 디자인이 정리돼 보임

 

이 작은 디테일 하나로 디자인 고수처럼 보일 수 있습니다.
레이아웃이 이상하면 폰트보다 line-height 먼저 점검해보세요!

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
1230
1228
1227
1226
1225
1224
1223
1222
1220
1219
1218
1217
1215
1214
1213
1212
1211
1210
1209
1195
1189
1176
1175
1172
1165
1164
1163
1137
1134
1132