2026, 새로운 도약을 시작합니다.

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

· 6개월 전 · 405

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

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

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

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

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

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

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

|

댓글 작성

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

로그인하기

디자이너팁

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
번호 제목 글쓴이 날짜 조회
377 2주 전 조회 59
376 3주 전 조회 108
375 1개월 전 조회 213
374 1개월 전 조회 181
373 3개월 전 조회 327
372 5개월 전 조회 368
371 5개월 전 조회 410
370 5개월 전 조회 483
369 5개월 전 조회 464
368 6개월 전 조회 497
367 6개월 전 조회 524
366 6개월 전 조회 406
365 7개월 전 조회 502
364 7개월 전 조회 501
363 11개월 전 조회 1,235
362 1년 전 조회 878
361 1년 전 조회 1,362
360 3년 전 조회 5,467
359 3년 전 조회 3,681
358 3년 전 조회 2,702
357 3년 전 조회 2,919
356 3년 전 조회 2,460
355 3년 전 조회 2,699
354 3년 전 조회 2,411
353 3년 전 조회 4,086
352 4년 전 조회 4,732
351 4년 전 조회 4,411
350 4년 전 조회 2만
349 4년 전 조회 4,970
348 4년 전 조회 4,216
🐛 버그신고