로그인

숫자가 많은 대시보드용 폰트: Inter·IBM Plex Sans KR·SUIT 비교

Inter, IBM Plex Sans KR, SUIT를 같은 KPI 카드와 표에 적용해 숫자 식별, 한영 높이, 굵기, 열 정렬을 살핀다.

다루는 폰트 · Inter

대시보드에서 가장 큰 숫자만 보기 좋다고 폰트를 고르면 표와 필터에서 문제가 생긴다. 가격의 쉼표, 음수, 소수점, 날짜, 영문 단위, 한글 라벨이 한 화면에 반복되기 때문이다. Inter, IBM Plex Sans KR, SUIT를 비교할 때는 KPI 카드와 데이터 표를 한 세트로 만들어야 한다.

매출 ₩128,900,240 · 전주 대비 -4.8% · Updated 09:42

숫자 표본을 업무 데이터로 만든다

0부터 9까지 한 번씩 보는 것보다 11,111과 88,888, 소수점, 괄호 음수, 통화 기호를 섞는다. 날짜는 짧은 형식과 긴 형식을 모두 넣고, 빈 값과 대시도 같은 열에 둔다. 실제 데이터의 가장 긴 단위가 카드 폭을 결정한다.

같은 크기와 굵기, 열 너비를 적용한 뒤 font-family만 바꾼다. 숫자의 모양뿐 아니라 한글 라벨과 영문 약어가 위아래로 흔들리지 않는지 확인한다.

Inter는 숫자와 라틴 영역에서 본다

Inter 공식 저장소와 획획클럽 카탈로그는 화면용 라틴 서체와 다양한 숫자·OpenType 기능을 안내한다. 현재 카탈로그 자산에는 한글 글리프가 없어 한국어는 폴백 폰트가 맡는다. 숫자만 좋다는 이유로 한글 조합을 생략할 수 없다.

큰 KPI와 12px 안팎의 축 눈금을 함께 비교한다. 0과 8, 1과 7, 소수점과 쉼표가 작은 크기에서도 구분되는지 보고 폴백 한글과 기준선을 맞춘다.

Q3 24.8% · MAU 1,204,892 · CAC ₩18,320

IBM Plex Sans KR은 한영 한 벌의 흐름을 본다

IBM Plex Sans KR은 한글과 라틴을 한 패밀리로 다룰 수 있고 카탈로그에는 100~700 굵기가 기록돼 있다. 라벨, 숫자, 단위를 한 줄에서 비교하기 편하다. KPI의 큰 숫자와 표의 작은 본문이 같은 굵기 단계로 충분히 갈리는지 확인한다.

영문 약어가 많은 데이터 제품에서는 한글만 있는 화면과 결과가 다를 수 있다. API, ARR, QoQ 같은 약어를 넣고 대문자의 폭과 숫자 높이가 서로 경쟁하지 않는지 본다.

SUIT는 작은 라벨과 촘촘한 카드에서 본다

SUIT 공식 저장소는 UI 본문용 성격과 정적·가변 WOFF2 배포를 안내한다. 필터 칩, 표 머리글, 보조 숫자처럼 작은 요소에서 획과 받침이 뭉치지 않는지 확인한다. 큰 숫자만 확대해 보는 비교로는 이 장면을 잡기 어렵다.

카드 폭이 제한된 모바일 대시보드에서는 숫자와 단위가 줄을 바꾸는지 살핀다. “1,204명”과 “1.2M users”를 함께 놓고 제품이 실제로 쓰는 표기법을 기준으로 고른다.

목표 96.0% · 실적 92.4% · 차이 -3.6%p

정렬 기능은 지원 여부를 확인하고 쓴다

tabular-nums를 선언했다고 모든 파일과 굵기에서 고정폭 숫자가 적용된다고 가정하지 않는다. 계산 스타일과 실제 열 정렬을 확인하고, 지원되지 않으면 표 구조나 정렬 방식으로 보완한다. 소수점 위치도 별도 항목이다.

Inter 상세에서 대표 후보의 지원 범위를 보고 폰트 시뮬레이터에 KPI 문구를 넣자. 숫자 식별, 한영 기준선, 작은 라벨, 열 정렬 네 항목을 통과한 뒤 실제 대시보드에 적용한다.