[CSS] Pretendard 숫자 데이터 고정폭 적용하기

 

사내 백오피스 프로젝트에서 숫자의 단위가 같은데

폰트의 크기가 달라 가독성이 떨어진다는 요구사항을 받았습니다.

 

이 프로젝트는 특성상 가격 데이터를 많이 다루기 때문에

숫자의 가독성이 중요했습니다.

해결방법 함께 알아봅시다. 😀

 

---

📝 문제 상황

https://en.wikipedia.org/wiki/Monospaced_font

 

⦁가변폭 폰트 vs 고정폭 폰트

해당 현상이 발생한 이유는 사용중인 Pretendard 폰트가 가변폭 폰트이기 때문입니다.

⦁ 가변폭 폰트 (Proportional Font)
글자마다 너비가 서로 다르게 설정된 폰트입니다. 예를 들어 i는 좁고, m은 넓게 표시됩니다.

- 일반적인 본문에 사용

⦁ 고정폭 폰트 (monospaced font, fixed-pitch, fixed-width, non-proportional font)
모든 글자와 기호가 동일한 너비를 가지는 폰트입니다. i, m, 1, W가 모두 같은 폭을 차지합니다.

- 숫자가 나란히 보여야 할 때
- 시계나 타이머 (ex. 12:34:56)
- 가격 리스트 (ex. ₩1,000 / ₩10,000 / ₩100,000)
- 회계나 통계 관련 표

 

 

---

📝 해결 방법

https://github.com/orioncactus/pretendard/discussions/110

✅ Pretendard는 고정폭 숫자 기능을 지원합니다. 사용하는 폰트가 고정폭 숫자를 지원하는지 확인해보세요 !

 

// globlas.css
body {
  font-family: 'Pretendard', sans-serif;
  /* 
   font-variant-numeric: 숫자(0~9)의 스타일을 조절하는 CSS 속성입니다.
   tabular-nums: 숫자들을 같은 폭으로 출력하도록 지정합니다. 
  */
  font-variant-numeric: tabular-nums;
}

폰트 자체를 고정폭 폰트로 바꾸는 방법도 있지만 숫자에만 적용하고 싶을 경우

font-variant-numeric를 사용할 수 있습니다.

 

⦁적용 결과

 

숫자의 폰트 크기가 고정되어 가독성이 훨씬 개선되었습니다 ! 😎

 

---

 

---

참고 문헌 : 

https://en.wikipedia.org/wiki/Monospaced_font

https://velog.io/@aneb/css-%EA%B0%80%EB%B3%80%ED%8F%AD-%ED%8F%B0%ED%8A%B8%EB%A5%BC-%EA%B3%A0%EC%A0%95%ED%8F%AD-%ED%8F%B0%ED%8A%B8%EB%A1%9C-%EB%B0%94%EA%BE%B8%EB%8A%94-%EB%B0%A9%EB%B2%95