숫자 서식

정의

숫자 서식은 폰트가 숫자를 그리는 방식을 골라 쓰는 기능입니다. 그중 가장 자주 쓰는 것이 숫자의 폭을 다루는 설정입니다. 고정폭(tabular) 숫자는 0부터 9까지 모든 숫자가 똑같은 너비를 차지하도록 만들어져, 숫자를 위아래로 쌓으면 자릿수가 세로로 딱 맞아떨어집니다. 반대로 비례(proportional) 숫자는 글자마다 어울리는 폭을 가져서, 예를 들어 1은 좁고 0은 넓게 그려집니다. 같은 폰트 안에 이 두 방식이 함께 들어 있어, 쓰는 곳에 맞춰 골라 쓸 수 있습니다. 어느 쪽이 더 좋은 것이 아니라 목적이 다른 두 도구인 셈입니다. 이 선택은 font-variant-numeric 속성으로 지정합니다.

왜 중요한가

표나 가격, 대시보드의 지표처럼 숫자를 세로로 나란히 늘어놓는 곳에서는 자릿수가 어긋나면 읽기가 무척 불편해집니다. 비례 숫자는 폭이 제각각이라 위아래 줄의 같은 자리 숫자가 서로 어긋나, 값의 크기를 한눈에 비교하기 어렵습니다. 고정폭 숫자를 쓰면 모든 자릿수가 수직으로 정확히 맞아떨어져, 어느 값이 크고 작은지 눈으로 훑기만 해도 바로 보입니다. 또 실시간으로 바뀌는 숫자에서도 고정폭을 쓰면 값이 갱신될 때 자릿수 폭이 달라 좌우로 흔들리는 현상을 막을 수 있습니다. 반대로 문장 속에 섞여 들어가는 숫자는 굳이 폭을 맞출 필요가 없어, 주변 글자와 자연스럽게 어울리는 비례 숫자가 더 보기 좋습니다. 이처럼 같은 숫자라도 어디에 놓이느냐에 따라 알맞은 서식이 달라집니다.

흔한 실수

• 표나 가격표에 비례 숫자를 그대로 쓰는 경우입니다. 자릿수가 세로로 어긋나 값을 비교하기 어렵고, 목록이 지저분해 보입니다. 세로로 정렬돼야 하는 숫자에는 고정폭(tabular)을 지정하세요.
• 반대로 문장 속 숫자에까지 고정폭을 강제하는 경우입니다. 좁아야 자연스러운 1 같은 숫자가 억지로 넓어져 글자 사이가 뜨게 되고, 문장의 흐름이 어색하게 끊겨 보입니다.
• 숫자를 세로로 맞추려고 고정폭 대신 빈칸이나 여러 개의 공백을 손으로 끼워 넣는 경우입니다. 글꼴이나 화면 크기가 바뀌면 정렬이 곧바로 어긋나므로, 이런 자리에는 손수 맞추지 말고 고정폭 숫자에 맡기는 편이 훨씬 안정적입니다.

실무 팁

• 표와 가격, 대시보드처럼 숫자가 세로로 정렬돼야 하는 곳에는 tabular-nums를, 문장 속에 섞이는 숫자에는 비례(proportional) 숫자를 쓰세요. 둘 다 font-variant-numeric으로 지정합니다.
• 값이 실시간으로 바뀌는 카운터나 타이머에는 고정폭 숫자를 쓰세요. 자릿수 폭이 일정해야 숫자가 갱신될 때 좌우로 들썩이지 않고 제자리에 머물러, 훨씬 안정적으로 보입니다. 초를 세는 타이머에서 이 흔들림은 특히 눈에 잘 띕니다.
• 숫자 서식을 정하기 전에 쓰려는 폰트가 그 기능을 지원하는지 먼저 확인하세요. 일부 폰트는 고정폭 숫자를 아예 담고 있지 않아, 지정해도 아무 변화가 없을 수 있습니다. 이럴 때는 숫자만 고정폭을 지원하는 다른 글꼴로 바꿔 쓰는 방법도 있습니다.

관련 개념