가격·날짜·표 열을 맞추는 타이포그래피: tabular nums 검증 순서

가격표의 오른쪽 끝을 맞췄는데 숫자 열이 미세하게 흔들린다면 숫자마다 폭이 다른 폰트를 쓰고 있을 수 있다. font-variant-numeric: tabular-nums는 유용하지만 선언만으로 적용을 증명하지 못한다. 실제 파일과 굵기가 기능을 제공하는지 표에서 확인해야 한다.

9,800원
18,500원
128,900원

비교용 데이터에 예외를 넣는다

자릿수가 다른 양수와 음수, 0, 소수점, 퍼센트, 통화 기호, 괄호 표기를 준비한다. 날짜는 2026-09-29와 9월 29일을 함께 넣고 빈 값은 대시나 “없음”으로 표시한다. 데이터가 깨끗한 숫자만 있을 때는 정렬 문제를 찾기 어렵다.

정렬은 CSS 속성만이 아니라 셀의 text-align, 안쪽 여백, 단위 배치에도 영향을 받는다. 글꼴 검증 전에 표 구조가 열마다 같은 규칙을 쓰는지 확인한다.

기능 선언과 실제 적용을 나눠 본다

font-variant-numeric 또는 대응하는 OpenType 설정을 적용한 뒤 켠 화면과 끈 화면을 캡처한다. 11111과 88888처럼 폭 차이가 드러나는 숫자를 겹쳐 보면 변화가 선명하다. 변화가 없다면 원래 숫자가 같은 폭인지, 기능이 지원되지 않는지 더 확인한다.

Inter 공식 자료의 숫자 기능을 참고하되 현재 서비스가 받는 정확한 파일과 굵기를 기준으로 판정한다. 패밀리 전체의 설명을 개별 서브셋 파일의 보장으로 바꾸지 않는다.

111,111.11 / 888,888.88 / -10.05%

굵기와 폴백을 바꿔 반복한다

본문 400에서는 맞고 강조 700에서 흔들릴 수 있으므로 실제 사용하는 굵기를 모두 확인한다. Inter에 없는 한글과 통화 기호가 뒤의 폴백 폰트에서 나오는지도 렌더링 정보를 읽어 본다. 한 셀 안에서 글자별 폰트가 섞이면 높이와 간격이 달라질 수 있다.

프리텐다드나 IBM Plex Sans KR 한 벌로 표를 만든 결과와도 비교한다. 여러 폰트를 섞은 조합이 숫자에는 좋지만 한글 라벨을 불안정하게 만든다면 한 패밀리 구성이 더 나을 수 있다.

소수점과 단위는 별도 열처럼 다룬다

고정폭 숫자가 적용돼도 자릿수가 다르면 소수점 위치는 자동으로 맞지 않는다. 데이터 형식을 통일하거나 정수와 소수부를 나누는 방식을 검토한다. 단위가 셀마다 다르면 숫자 끝과 단위 시작 중 무엇을 맞출지도 정해야 한다.

빈 값과 로딩 상태가 정렬을 깨지 않는지 본다. 스켈레톤 너비, “—”, “집계 중” 같은 문자열이 실제 표의 리듬에 포함된다.

2026-09-08 · 09:07:05 · 평균 1.42초 · 데이터 없음 —

반응형 표에서 다시 확인한다

모바일에서는 열이 숨거나 카드 형태로 바뀔 수 있다. 데스크톱의 고정폭 숫자 판단을 그대로 옮기지 말고 좁은 폭에서 숫자와 단위가 한 줄을 유지하는지, 말줄임이 값을 오해하게 만들지 않는지 살핀다.

Inter 상세에서 후보를 확인하고 폰트 시뮬레이터에 숫자 표본을 넣자. 이후 실제 표에서 기능 on/off, 굵기, 폴백, 반응형 네 단계를 캡처하면 속성이 아니라 결과로 판단할 수 있다.