line-height 정리만 잘해도 디자인 완성도가 올라간다
라인 높이는 단순히 “글씨를 넓게 보이게” 하는 게 아니라
전체 레이아웃의 수직 리듬을 만드는 핵심 요소입니다.
일관된 line-height는 가독성 향상뿐만 아니라
여백이 정갈해지고 눈의 피로도도 줄어듭니다.
기본 body 텍스트에는 line-height: 1.5 또는 150%가 가장 적절
헤딩(제목)에는 크기에 비례해 조금 줄여서 1.2~1.4 추천
Figma나 CSS에서 숫자값(line-height: 24px)으로 고정하면 그리드 정렬이 쉬움
같은 line-height 값 그룹끼리 컴포넌트를 묶어두면 디자인이 정리돼 보임
이 작은 디테일 하나로 디자인 고수처럼 보일 수 있습니다.
레이아웃이 이상하면 폰트보다 line-height 먼저 점검해보세요!
게시글 목록
| 번호 | 제목 |
|---|---|
| 718 | |
| 714 | |
| 713 | |
| 711 | |
| 710 | |
| 709 | |
| 707 | |
| 701 | |
| 698 | |
| 684 | |
| 683 | |
| 680 | |
| 669 | |
| 666 | |
| 664 | |
| 663 | |
| 660 | |
| 657 | |
| 653 | |
| 650 | |
| 648 | |
| 646 | |
| 643 | |
| 640 | |
| 635 | |
| 631 | |
| 629 | |
| 585 | |
| 582 | |
| 576 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기