한글 UI 폰트 추천
한글 UI 폰트는 13px 버튼과 표 숫자에서 갈립니다. 한국어 제품 UI는 짧은 라벨, 탭, 배지, 토스트, 표 헤더, 가격, 재고 수량처럼 작고 반복적인 텍스트가 많습니다. 포스터용 예쁜 폰트와 UI 폰트 기준이 다릅니다. 12–14px, 500/600 굵기 버튼, tabular numbers를 Fonts 탭에서 먼저 확인하세요.
[object Object]
13px 라벨 · 14px 입력값 · 12px 도움말
이메일
you@company.com
인증 메일 보내기
UI card SUIT · 13px title
SUIT는 12–14px 라벨·입력·버튼에서 획 대비가 선명해 대시보드·폼에 자주 쓰입니다.
상태 배지 · Pretendard
12px · 600 · 짧은 라벨
OK
배송 완료
Warn
주소 확인 필요
Err
결제 실패
Cap
Updated 5m ago
360px 모바일에서 2줄 배지·탭 라벨이 잘리지 않는지 스냅폰트 미리보기 폭을 줄여 확인하세요.
데이터 표 · Spoqa Han Sans Neo
헤더 12px · 셀 13px · 숫자 600
| SKU | 재고 | 상태 |
|---|
| WD-1024 | 842 | 판매중 |
| WD-2048 | 12 | 품절 임박 |
| WD-4096 | 0 | 품절 |
UI 폰트는 표 숫자·영문 SKU·한글 상태값이 한 줄에 섞여도 rhythm이 유지되는지가 핵심입니다.
UI 폰트 6가지 체크리스트
- 12px 캡션: "어제", "3분 전", helper text — 획 대비·자간이 충분한지
- 13–14px 버튼: "저장", "결제하기", "전체 보기" — SemiBold(600)에서 획 붙음 없는지
- 14–15px 본문: 설정 설명, empty state — 3–4줄 연속 읽기 테스트
- 표·데이터: 1,234,567 / 98.5% / 2026-05-28 — 숫자 폭·정렬(tabular) 확인
- 상태·오류: "네트워크 오류", "필수 입력" — 600 빨간 텍스트 13px 가독성
- 영문 혼용: GET, API Key, snapdeck Pro — 메뉴·코드 스니펫과 한글 baseline
자주 비교하는 한글 UI 폰트
- Pretendard: 가장 널리 쓰이는 범용 UI — 400/500/600/700, variable 지원, bilingual
- SUIT: 약간 좁은 자폭, 대시보드·표 밀도 높은 UI에 적합
- Spoqa Han Sans Neo: 네이버 계열 SaaS 레퍼런스, 700 제목과 400 본문 대비
- Noto Sans KR: Google Fonts CDN, 안정적 fallback, 글로벌 제품 한글 레이어
- IBM Plex Sans KR: B2B·엔터프라이즈 톤, Plex Mono와 코드 UI 세트
- Apple SD Gothic Neo / system-ui: 네이티브 앱 fallback — 웹은 별도 webfont 필요
영문 UI 폰트와 bilingual 스택
- Inter 400/500/600 + Pretendard 400 — 글로벌 SaaS 기본 조합
- Geist Sans + SUIT — Vercel·Next.js 생태계와 한글
- Public Sans + Noto Sans KR — gov·금융권 중립 톤
- font-family: Inter, Pretendard, -apple-system, sans-serif — 영문 우선, 한글 fallback
- font-family: Pretendard, Inter, sans-serif — 한글 비중 높은 제품
- unicode-range 또는 lang=ko/en 분리 로드로 파일 크기·FOUT 최적화
디자인 시스템에 UI 폰트 고정하기
- Type scale: 12/13/14/16/18/24/32 px — line-height 1.4–1.6, letter-spacing 0 또는 -0.01em
- Weight map: Caption 400, Body 400, Label 500, Button 600, Heading 600–700
- Figma: Text styles + Variable(가능 시) — 컴포넌트 Button/Input/Table Header 연결
- CSS: --font-sans, font-feature-settings: "tnum" 1 (표 숫자), -webkit-font-smoothing
- Storybook/Chromatic: 13px 버튼·14px table cell 스냅샷 회귀 테스트
- Licenses: OFL(Pretendard, Noto) — 앱 번들·CDN self-host 조건 팀 wiki에 링크
한글 UI 폰트 선정 5단계
- 대표 UI 화면(대시보드, 설정, 결제, empty state) 스크린샷 4장을 준비한다.
- Fonts 탭에서 Pretendard·SUIT·Noto Sans KR·Spoqa를 13px 버튼·14px 본문·표 숫자 문장으로 비교한다.
- Similar로 "Pretendard 대체" 후보 2개를 추가하고 밀도 높은 표 mockup에 overlay한다.
- Pairs로 H1(24px) + body(14px) + button(600, 14px) 조합을 확인한다.
- Licenses 확인 후 Figma text style + CSS @font-face(400·500·600·700 woff2 subset)를 PR로 올린다.
UI 폰트 비교 기능
- Fonts: px·굵기 실시간 미리보기, UI·sans 카테고리
- Similar: Pretendard·SUIT·Noto 계열 대체 UI 폰트
- Pairs: 헤더·카드·버튼 샘플 레이아웃
- Licenses: 앱·웹 임베딩 OFL·Apache 확인
