Back_to_Basics

{3줄 요약}

숫자는 텍스트와 다른 방식으로 읽혀요. 문장은 순서대로 읽지만, 숫자는 비교하고 패턴을 찾기 위해 봐요.
그래서 숫자용 서체 설정이 따로 있어요. Tabular Figures(고정폭 숫자)를 쓰면 표와 목록에서 숫자가 세로로 맞아 떨어져요.
금융·데이터 서비스에서 숫자 타이포그래피는 사용자 신뢰와 직결돼요. 잘못 정렬된 금액은 오류처럼 느껴질 수 있어요.

숫자는 읽는 것이 아니라 스캔하는 정보예요

텍스트를 읽을 때 눈은 왼쪽에서 오른쪽으로 흐르며 의미를 파악해요.
숫자는 달라요.

가격 목록을 볼 때, 계좌 잔액을 확인할 때, 통계 표를 볼 때 - 사람들은 숫자를 순서대로 읽기보다 비교해요.
"이게 저것보다 크다", "이 칸의 합이 얼마다"처럼요.
세로로 쭉 훑어 내리면서 패턴을 찾아요.

이 행동 방식이 숫자 타이포그래피를 일반 텍스트 타이포그래피와 다르게 만들어요.

많은 사람들이 "숫자도 그냥 폰트 바꾸면 되는 거 아닌가요?"라고 생각해요.
하지만 같은 서체 안에서도 숫자를 어떻게 설정하느냐에 따라 가독성과 신뢰도가 크게 달라져요.

Tabular Figures vs Proportional Figures: 어떤 차이인가요

대부분의 현대 서체에는 두 종류의 숫자 스타일이 들어 있어요.

Tabular Figures(고정폭 숫자): 모든 숫자(0~9)가 같은 폭을 가져요.
숫자 1이든 8이든 차지하는 가로 공간이 동일해요.

Proportional Figures(가변폭 숫자): 글자처럼 각 숫자의 실제 폭에 맞게 공간이 달라요.
1은 좁고 8은 넓어요.

왜 구분이 필요한가요?
표나 목록에서 숫자를 세로로 정렬할 때 확인해보면 바로 알 수 있어요.

Proportional Figures로 금액을 나열하면:

₩1,200
₩10,500
₩250

이렇게 되면 각 행의 숫자 폭이 달라서 자릿수가 세로로 맞지 않아요.
얼핏 보면 오류처럼 보이기도 해요.

Tabular Figures를 쓰면:

₩  1,200
₩ 10,500
₩    250

같은 자릿수가 세로로 정렬되어 한눈에 크기 비교가 돼요.

토스, 카카오뱅크, 뱅크샐러드 - 국내 핀테크 앱들이 금액 표시에 Tabular Figures를 적극적으로 활용해요.
잔액, 거래 내역, 이체 금액 등 숫자 비교가 핵심인 화면에서 세로 정렬이 신뢰감을 만들어요.

Lining vs Old-style Figures: 또 하나의 구분

숫자에는 또 다른 스타일 구분도 있어요.

Lining Figures(라이닝 숫자): 모든 숫자가 같은 높이(대문자 높이)로 균일하게 올라와요.
현대 디지털 인터페이스에서 대부분 이 방식을 써요.

Old-style Figures(올드스타일 숫자): 숫자마다 높이가 달라요.
3, 4, 5, 7, 9는 아래로 내려가고 6, 8은 위로 올라가요.
필기체처럼 리드미컬한 느낌이에요.
본문 텍스트에 자연스럽게 섞일 때 쓰고, 표나 UI에는 안 맞아요.

UI와 데이터 표현에서는 Lining + Tabular 조합이 기본이에요.
균일한 높이, 균일한 폭.
이 두 조건을 갖춰야 숫자가 정보로 기능해요.

CSS로 숫자 스타일 적용하는 방법

대부분의 현대 서체는 OpenType 기능으로 숫자 스타일을 지원해요.

/* Tabular Lining Figures - 표, 금액, 데이터에 권장 */
.number {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Proportional Old-style Figures - 본문 텍스트 안의 숫자 */
.body-text {
  font-variant-numeric: proportional-nums oldstyle-nums;
}

서체가 이 기능을 지원하지 않으면 적용되지 않아요.
구글 폰트 기준으로는 Roboto, Noto Sans, Source Sans 등이 잘 지원해요.

서체 선택 후 반드시 실제로 숫자를 많이 나열해서 확인해야 해요.
서체 소개 페이지만 보고 판단하면 실제 데이터 환경에서 문제가 생길 수 있어요.

금액이 주인공이 돼야 할 때

금융 앱에서는 보통 잔액 숫자를 가장 크고 굵게 표시해요.
사용자가 앱을 열었을 때 가장 먼저 알고 싶은 게 "지금 내 돈이 얼마냐"이기 때문이에요.

이건 타이포그래피 위계 원칙 그대로예요.
가장 중요한 정보를 가장 눈에 띄게.
하지만 숫자에서는 추가로 고려할 게 있어요.

큰 숫자(예: 1,234,567원)는 쉼표 위치가 자릿수 파악에 결정적이에요.
쉼표가 숫자와 시각적으로 구분되게, 그리고 숫자 흐름을 끊지 않게 간격이 설계되어야 해요.
일부 서체는 큰 폰트 크기에서 쉼표가 너무 작아지거나 위치가 어색해지는 문제가 있어요.

어차피 숫자는 다 같아 보이지 않나요

아니에요.
같은 숫자라도 서체와 설정에 따라 완전히 다르게 보여요.

화면에 금액이 어색하게 정렬되어 있거나, 잔액 숫자가 일반 텍스트와 구분이 안 된다면 사용자는 이걸 "이 서비스가 덜 정교하다"는 신호로 받아들여요.
말로 설명하지 않아도 느껴요.

반대로 숫자가 깔끔하게 정렬되고, 크기 위계가 명확하면 - 데이터가 같아도 더 신뢰할 수 있는 서비스처럼 보여요.

서체의 숫자 특성을 확인하는 방법은 Serif vs Sans-serif와 함께 읽으면 이해가 깊어져요. 이 개념이 실제 UI에서 어떻게 쓰이는지는 UI Typography에서 다뤄요.

참고 문헌

Robert Bringhurst, 《The Elements of Typographic Style》(1992) - Tabular/Proportional, Lining/Old-style 구분과 사용 맥락을 상세히 다뤄요.
Jason Santa Maria, 《Web Typography》(2014) - CSS font-variant-numeric을 포함한 웹 환경 구현 방법을 설명해요.

Number Typography