숫자 조판의 디테일 — 표와 데이터에 어울리는 서체 고르기

본문 서체는 신경 써도 표 안의 숫자는 방치하는 경우가 많습니다. 숫자 조판은 가격표, 대시보드, 재무 리포트처럼 데이터가 중심인 화면에서 가독성과 신뢰도를 동시에 좌우하는 타이포그래피의 숨은 영역입니다.

1. 숫자에도 폭이 있다 — 라이닝과 올드스타일

대부분의 본문용 서체는 두 가지 숫자 스타일을 함께 제공합니다. 라이닝 숫자(lining figures)는 모든 숫자의 높이가 대문자와 같아 표나 제목에 어울리고, 올드스타일 숫자(oldstyle figures)는 소문자처럼 오르내림이 있어 본문 문장 속에서 자연스럽게 섞입니다. 이 둘을 구분하지 않고 쓰면 표에서는 숫자가 들쭉날쭉해 보이고, 본문에서는 숫자만 유난히 튀어 보입니다.

여기에 더해 자간이 고정된 표 형식 숫자(tabular figures)와 글자마다 폭이 다른 비례 숫자(proportional figures)의 구분도 있습니다. 표에서 자릿수가 다른 숫자들이 세로로 정렬되지 않고 흔들려 보인다면, 대부분 비례 숫자를 표에 그대로 쓴 경우입니다.

2. 표와 대시보드에는 표 형식 숫자를

재무제표나 가격 비교표처럼 세로로 숫자를 훑어봐야 하는 화면에서는 반드시 표 형식(tabular) 숫자를 써야 합니다. 숫자마다 폭이 동일해야 자릿수가 다른 값들도 소수점과 단위가 세로선을 따라 가지런히 정렬되기 때문입니다. 이 정렬이 어긋나면 사용자는 매번 눈으로 자릿수를 다시 세야 하고, 그만큼 데이터에 대한 신뢰도 흔들립니다.

CSS에서는 font-variant-numeric: tabular-nums 속성으로 이를 강제할 수 있습니다. 디자인 시스템에 이 속성을 컴포넌트 레벨에서 기본값으로 넣어두면, 개발자가 매번 신경 쓰지 않아도 표와 통계 위젯의 숫자가 항상 정렬된 상태로 나옵니다.

3. 통화와 단위 표기의 디테일

숫자 조판은 폭의 문제만이 아닙니다. 통화 기호와 숫자 사이의 간격, 퍼센트 기호의 위치, 음수를 표기하는 방식도 신뢰도에 영향을 줍니다. 마이너스 기호(-) 대신 하이픈을 그대로 쓰면 시각적으로 너무 짧아 음수가 눈에 잘 띄지 않는 경우가 많습니다. 실제 마이너스 부호(−, U+2212)나 색상으로 음수를 구분하는 편이 훨씬 명확합니다.

단위는 숫자와 한 덩어리로 묶는다

“12 kg”처럼 숫자와 단위 사이에 줄바꿈이 일어나면 읽는 흐름이 끊깁니다. 줄바꿈 없는 공백(non-breaking space)을 숫자와 단위 사이에 넣어 하나의 단위처럼 취급해야 합니다. 작은 디테일이지만 반응형 레이아웃에서 화면 폭이 좁아질 때 특히 자주 발생하는 실수입니다.

4. 실무에 적용하기

새 프로젝트를 시작할 때 먼저 본문 서체가 표 형식 숫자를 지원하는지 확인하세요. 지원하지 않는다면 숫자만이라도 지원하는 서체로 보완하는 것이 낫습니다. 그다음 디자인 시스템의 컴포넌트 단위로 “가격”, “통계”, “표” 스타일에 tabular-nums를 기본 적용하고, 음수·통화·단위 표기 규칙을 스타일 가이드에 명문화해두면 이후 팀원이 늘어나도 일관성이 유지됩니다.

다국어 서비스라면 숫자 조판 규칙도 언어별로 검토가 필요합니다. 천 단위 구분 기호로 쉼표를 쓰는 언어와 마침표를 쓰는 언어가 다르고, 통화 기호를 숫자 앞에 두는지 뒤에 두는지도 지역마다 다릅니다. 디자인 시스템 문서에 이 규칙을 지역별로 정리해두면, 로케일이 늘어날 때마다 매번 새로 논의하는 시간을 아낄 수 있습니다.

마치며

숫자 조판은 화려한 작업이 아니지만, 사용자가 데이터를 신뢰할 수 있는지를 결정하는 조용한 디테일입니다. 다음에 대시보드나 가격표를 디자인할 때는 서체 선택만큼이나 숫자 스타일 속성을 함께 점검해 보시기 바랍니다.