선

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

· 2025-06-26 (목) 10:24:18 · 732

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

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

 

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

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

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

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

 

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

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

디자이너팁

377건

디자인과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
제목 글쓴이 날짜 조회
25-12-27 조회 507
25-12-17 조회 503
25-11-30 조회 584
25-11-20 조회 552
25-10-10 조회 757
25-08-01 조회 703
25-08-01 조회 764
25-07-23 조회 797
25-07-17 조회 819
25-07-09 조회 824
25-06-26 조회 893
25-06-26 조회 733
25-06-10 조회 834
25-06-07 조회 831
25-02-03 조회 1,571
25-01-08 조회 1,190
24-10-21 조회 1,731
22-12-26 조회 6,119
22-09-28 조회 4,118
22-07-01 조회 3,084
22-06-14 조회 3,275
22-05-13 조회 2,834
22-04-28 조회 3,090
22-04-28 조회 2,826
22-02-09 조회 4,790
21-09-29 조회 5,174
21-08-27 조회 4,814
21-07-02 조회 2.1만
21-06-23 조회 5,451
21-06-21 조회 4,712