Front-End/HTML, CSS, JS
[CSS] Pretendard 숫자 데이터 고정폭 적용하기
현기
2025. 5. 7. 20:20
사내 백오피스 프로젝트에서 숫자의 단위가 같은데
폰트의 크기가 달라 가독성이 떨어진다는 요구사항을 받았습니다.
이 프로젝트는 특성상 가격 데이터를 많이 다루기 때문에
숫자의 가독성이 중요했습니다.
해결방법 함께 알아봅시다. 😀
📝 문제 상황
⦁가변폭 폰트 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)
- 회계나 통계 관련 표
📝 해결 방법
✅ 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를 사용할 수 있습니다.
⦁적용 결과
숫자의 폰트 크기가 고정되어 가독성이 훨씬 개선되었습니다 ! 😎
참고 문헌 :