line-height 정리만 잘해도 디자인 완성도가 올라간다
라인 높이는 단순히 “글씨를 넓게 보이게” 하는 게 아니라
전체 레이아웃의 수직 리듬을 만드는 핵심 요소입니다.
일관된 line-height는 가독성 향상뿐만 아니라
여백이 정갈해지고 눈의 피로도도 줄어듭니다.
기본 body 텍스트에는 line-height: 1.5 또는 150%가 가장 적절
헤딩(제목)에는 크기에 비례해 조금 줄여서 1.2~1.4 추천
Figma나 CSS에서 숫자값(line-height: 24px)으로 고정하면 그리드 정렬이 쉬움
같은 line-height 값 그룹끼리 컴포넌트를 묶어두면 디자인이 정리돼 보임
이 작은 디테일 하나로 디자인 고수처럼 보일 수 있습니다.
레이아웃이 이상하면 폰트보다 line-height 먼저 점검해보세요!
게시판 목록
디자이너팁
디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 102 | 8년 전 | 4623 | ||
| 101 | 8년 전 | 12541 | ||
| 100 |
체리맛쿠키
|
8년 전 | 9885 | |
| 99 | 8년 전 | 6544 | ||
| 98 |
프로그래머7
|
8년 전 | 4109 | |
| 97 | 8년 전 | 4556 | ||
| 96 | 8년 전 | 145967 | ||
| 95 | 8년 전 | 3836 | ||
| 94 |
 weblife |
8년 전 | 3510 | |
| 93 | 8년 전 | 3969 | ||
| 92 | 8년 전 | 6854 | ||
| 91 | 8년 전 | 3227 | ||
| 90 | 8년 전 | 3834 | ||
| 89 | 8년 전 | 3423 | ||
| 88 | 8년 전 | 3827 | ||
| 87 | 8년 전 | 3513 | ||
| 86 | 8년 전 | 4235 | ||
| 85 | 9년 전 | 4539 | ||
| 84 |
 terrorboy |
9년 전 | 4978 | |
| 83 |
weblife |
9년 전 | 4198 | |
| 82 | 9년 전 | 5639 | ||
| 81 | 9년 전 | 7051 | ||
| 80 | 9년 전 | 8278 | ||
| 79 |
크레용웍스
|
9년 전 | 8105 | |
| 78 | 9년 전 | 3931 | ||
| 77 | 9년 전 | 4121 | ||
| 76 |
 nanati |
9년 전 | 3821 | |
| 75 | 9년 전 | 4567 | ||
| 74 | 9년 전 | 2578 | ||
| 73 | 9년 전 | 4224 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기