숫자를 테이블이나 리스트로 화면에 보여줄 때, 특히 가격이나 수익률 같은 데이터를 다룰 때, "정렬이 이상하게 보인다"는 느낌을 받은 적이 있다면 그 원인은 폰트일 가능성이 크다.
문제 상황: 가변폭 폰트의 한계
일반적인 웹 폰트는 대부분 가변폭(font-proportional) 폰트다.
이는 글자마다 가로 폭이 다르다는 뜻이다.
예를 들어 다음 숫자를 보자:
123,000
99,100
6,200
겉보기엔 오른쪽 정렬을 했지만 숫자 자릿수가 다르고 각 글자의 폭도 달라서 들쭉날쭉해 보인다.
특히 1은 좁고 0은 넓기 때문에 숫자가 시각적으로 밀려 보이는 문제가 생긴다.
해결책: 고정폭 폰트(monospace)
고정폭 폰트는 모든 문자(숫자 포함)의 너비가 동일하다.
즉, 1이나 0이나 동일한 간격으로 표현된다. 이 덕분에 숫자가 정렬된 것처럼 정확하게 보여진다.
예시: 동일한 숫자 데이터
가변폭 폰트 vs 고정폭 폰트
고정폭 폰트 추천
폰트 이름비고
| Courier New | 기본 제공, 안정적 |
| Roboto Mono | 세련된 스타일 |
| Fira Code | 개발자 친화적 폰트 |
| Inconsolata | 부드러운 느낌 |
적용 방법 (CSS 예시)
font-family: 'Courier New', monospace;
혹은 Google Fonts에서 원하는 고정폭 폰트를 import해 사용해도 된다.
마무리
숫자를 다루는 서비스나 데이터 기반 화면이라면 고정폭 폰트를 기본으로 설정해두는 것이 사용자 경험을 훨씬 더 깔끔하게 만들어준다.