본문 바로가기
카테고리 없음

PX vs % Line-height 단위의 특징과 장단점, 선택 기준, 추천 전략

by Mon-Di 2025. 1. 18.

line-height는 텍스트 가독성을 결정하는 중요한 요소이다. 일반적으로 픽셀(px)과 퍼센트(%) 단위가 많이 사용되는데, 각각의 차이점과 장단점을 이해하면 더 효과적인 타이포그래피 디자인이 가능하다. 본 글에서는 px과 % 단위의 line-height가 어떤 특징이 있는지, 언제 사용해야 하는지, 그리고 각 방식의 장점과 단점이 무엇인지 소개하려 한다.

 

 

1. PX 단위 Line-height의 특징과 장단점

픽셀(px)은 고정된 크기를 의미하며, 브라우저나 화면 크기에 관계없이 동일한 높이를 유지하는 것이 특징이다.

p {
  font-size: 16px;
  line-height: 24px; /* 글자 크기의 1.5배 */
}

PX 단위의 장점

  • 정확성과 일관성 : px 단위는 고정된 값을 가지므로, 모든 디바이스와 해상도에서 동일한 줄 높이를 유지
  • 정밀한 디자인 가능 : 소수점 문제를 방지하고, 디자인 툴(Figma, Sketch 등)에서 쉽게 작업할 수 있음
  • 디자인 그리드와의 호환성 : 픽셀 단위의 기준선(grid system)을 정확히 맞추기 용이

PX 단위의 단점

  • 유연성 부족 : 사용자가 브라우저 설정에서 폰트 크기를 조정해도 line-height는 변하지 않아, 접근성이 낮을 수 있음
  • 반응형 디자인에 불리함 : 상대적 조정이 어려워 작은 화면에서 가독성이 떨어질 수 있고, 이 경우 따로 화면 크기별 개별 지정이 필요함

2. % 단위 Line-height의 특징과 장단점

퍼센트(%) 단위는 폰트 크기를 기준으로 line-height를 설정하는 방식이다.

이 값은 해당 요소의 font-size에 비례하여 동적으로 변경된다.

p {
  font-size: 16px;
  line-height: 150%; /* 글자 크기의 1.5배 */
}

% 단위의 장점

  • 유연성 : 폰트 크기에 상대적인 비율로 동작하기 때문에, 폰트 크기만 바꿔도 Line-height가 자동으로 조정됨
  • 반응형 디자인에 적합 : 다양한 디바이스나 해상도에서 일관된 비율로 가독성을 유지
  • 개발 효율성 : 퍼블리셔와 협업 시 % 단위는 CSS에서 기본적으로 권장되는 방식이며, 관리가 용이

% 단위의 단점

  • 정밀도 부족 : 특정 크기의 폰트와 Line-height가 미묘하게 어울리지 않을 수 있음
  • 시각적 일관성 문제 : 폰트 크기에 따라 Line-height가 의도치 않게 변해 디자인의 균형을 해칠 수 있음
  • 브라우저 간 차이 발생 가능 : 브라우저별 렌더링 방식이 다를 수 있어 테스트가 필요하며, 일부 브라우저에서는 % 단위가 font-size의 기본값을 기준으로 다르게 계산될 수 있음

 

 

3. PX vs % 단위의 선택 기준

정리하자면 % 단위는 비율 개념이고 PX 단위는 절대값 개념이라고 생각하면 되는데, 어떤 단위를 선택한다고 해서 무조건 틀렸다고 할 수는 없다. PX 단위는 디자인의 일관성을 유지하는 데 유리하지만, 반응형 웹이나 접근성을 고려할 때는 % 단위가 더욱 적합하다.

따라서 프로젝트의 목적과 환경에 맞춰 적절한 단위를 선택하는 것이 중요하므로 아래 상황을 고려하여 적절한 단위를 사용하면 된다.

기준 PX 단위 사용 추천 % 단위 사용 추천
정확한 디자인 유지 ✅ ❌
반응형 웹 디자인 ❌ ✅
웹 접근성 ❌ ✅
가독성 유지 ✅ ✅
폰트 크기 변경 가능성 ❌ ✅
UI/UX 디자인의 일관성 ✅ ❌

PX 추천하는 경우

  • 고정된 레이아웃과 정밀한 디자인이 중요한 경우
  • 행간을 정확히 조절하여 시각적인 일관성을 유지해야 할 때
  • UI 디자인 툴에서 작업할 때 소수점 문제를 피하고 싶을 때

% 추천하는 경우

  • 반응형 디자인에서 텍스트 크기에 따라 유연하게 Line-height를 조정해야 할 때
  • 다양한 디바이스와 환경에서 가독성을 우선시할 때
  • 퍼블리셔가 관리하기 쉽게 상대적인 비율을 선호할 때

 

 

4. 협업 시, 단위 선택에 대한 추천 전략

단위 선택에 있어 디자이너 입장에서는 정확한 디자인표현이 가능한 PX을 선호할 것이다.

하지만 유지보수나 웹 접근성을 위해서라면 % 혹은 em 사용이 유리하므로 개발자와 퍼블리셔는 이쪽을 선호할 것이다.

따라서 협업 시엔 아래 방법들을 추천한다.

 

전략 1.  용도에 따라 혼합해서 사용하기

  • PX 단위 : 로고, 헤더 텍스트, 버튼과 같은 UI 요소
  • % 단위 : 본문 텍스트, 블로그 콘텐츠, 반응형 디자인이 필요한 경우

전략 2.  PX로 디자인하되 % 단위로 변환해도 '소수점'이 아닌 '정수'로 떨어지는 PX값 사용하기

(하단 이미지 참고) Figma 툴을 예시로 들자면 폰트를 선택하고 dev 모드의 line-height 값을 확인해 보면 변환된 % 값도 확인할 수 있다.

%로 변환해도 정수로 떨어지는 px값을 사용하여 디자인 한 뒤, 퍼블리셔와 개발자에게 전달하면 모두를 어느 정도 만족시킬 수 있을 것이다.

 

 

 

 

 

 

티스토리툴바