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

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

· 4개월 전 · 283

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

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

 

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

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

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

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

 

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

댓글 작성

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

로그인하기

게시글 목록

번호 제목
1295
1294
1293
1292
1291
1289
1288
1287
1280
1279
1274
1273
1272
1268
1267
1266
1265
1264
1263
1262
1261
1260
1259
1258
1252
1251
1250
1239
1232
1231