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에서 해주시기 바랍니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 372 |
선택과집중
|
4개월 전 | 244 | |
| 371 |
선택과집중
|
4개월 전 | 271 | |
| 370 |
선택과집중
|
5개월 전 | 352 | |
| 369 |
선택과집중
|
5개월 전 | 329 | |
| 368 |
선택과집중
|
5개월 전 | 376 | |
| 367 |
nekoieye
|
5개월 전 | 419 | |
| 366 |
선택과집중
|
5개월 전 | 309 | |
| 365 |
선택과집중
|
6개월 전 | 360 | |
| 364 |
선택과집중
|
6개월 전 | 404 | |
| 363 | 10개월 전 | 1082 | ||
| 362 | 11개월 전 | 787 | ||
| 361 | 1년 전 | 1237 | ||
| 360 | 2년 전 | 5150 | ||
| 359 |
별지기천사
|
3년 전 | 3565 | |
| 358 |
 ChristinaWei |
3년 전 | 2637 | |
| 357 | 3년 전 | 2835 | ||
| 356 | 3년 전 | 2391 | ||
| 355 |
네이비블루
|
3년 전 | 2591 | |
| 354 |
네이비블루
|
3년 전 | 2163 | |
| 353 |
웹플레이스
|
3년 전 | 3369 | |
| 352 | 4년 전 | 4547 | ||
| 351 |
 그누그누오 |
4년 전 | 4192 | |
| 350 | 4년 전 | 17300 | ||
| 349 | 4년 전 | 4822 | ||
| 348 | 4년 전 | 4060 | ||
| 347 | 4년 전 | 2549 | ||
| 346 | 4년 전 | 3651 | ||
| 345 | 4년 전 | 3454 | ||
| 344 | 4년 전 | 3340 | ||
| 343 |
루돌프사슴코
|
4년 전 | 2509 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기