UI font guide
Free UI fonts for products that need to feel clear. UI typography needs small-size clarity at 12–14px, weight range through 700, readable numbers, bilingual support, and families that do not fight the layout grid. snapdeck font helps you compare practical UI families and find nearby alternatives before you publish a type scale.
[object Object]
13px label · 14px value · 14px button
Email
you@company.com
Send verification
UI card SUIT · 13px title
UI fonts must stay crisp at 12–14px for labels, tabs, badges, and dense tables.
Data table · Spoqa Han Sans Neo
SKU · stock · status in one grid
SKU Stock Status
WD-1024 842 Active WD-2048 12 Low WD-4096 0 Sold out
Check Latin SKUs, numerics, and Hangul status labels on the same row.
Status labels · Pretendard
12px semibold chips
OK
Delivered
Warn
Address needed
Err
Payment failed
Shrink preview width to ~360px to catch wrapping issues early.
What to inspect in a UI font
Prioritize repeat-reading surfaces over marketing hero sizes.
Legibility at 12–14px for labels, tables, helper text, badge counts, and dense dashboards.
Enough weights (400, 500, 600, 700) for buttons, tabs, headings, and numeric emphasis without synthetic bold.
Latin and Hangul harmony when product copy mixes languages in navigation, toasts, and settings panels.
Tabular or lining figures for financial tables, analytics, and billing screens at 13–14px.
Character width consistency so Korean labels do not wrap awkwardly beside English menu items.
Families people compare often
Neutral Latin UI sans: Inter, Geist, Public Sans, Source Sans 3, IBM Plex Sans, DM Sans.
Korean UI families: Pretendard, SUIT, Noto Sans KR, Gothic A1, NanumSquare, Spoqa Han Sans Neo.
Monospace companions: JetBrains Mono or IBM Plex Mono at 12–13px for code snippets beside 14px UI sans.
Nearby alternatives when Inter feels overused: Geist, Plus Jakarta Sans, Manrope, or Source Sans 3.
Hangul-first swaps: Pretendard vs. SUIT at 13px for table headers and 14px for form labels.
Suggested UI type scales
Mobile app: 12px captions, 14px body, 16px section titles, 20px screen titles; line-height 1.4–1.5 for body.
SaaS dashboard: 12px table cells, 13px secondary labels, 14px primary copy, 18px page titles at weight 600.
Marketing + product: keep UI at 14px Inter or Pretendard; reserve display fonts for landing heroes only.
Forms and errors: 13–14px helper text must stay readable on both light and dark surfaces at weight 400.
Data-heavy B2B: test SUIT or IBM Plex Sans at 12px before committing to a wide grotesk for grid layouts.
UI font failure modes
Display fonts used for 12px button labels because the weight looked crisp at 32px in marketing mocks.
Families with only Regular and Bold forcing fake intermediate weights in CSS or Figma.
Latin-first UI fonts paired with Hangul fallback stacks that shift line height in mixed-language nav bars.
Ignoring number shapes: slashed zero, comma width, and percent sign clarity in pricing modules.
Skipping license checks for app bundling, self-hosted WOFF2, and in-app PDF invoice generation.
UI font evaluation workflow
Collect real strings: nav items, empty states, error messages, prices, and table headers from your product.
Preview finalists at 12px, 13px, and 14px on both light and dark themes with weights 400 and 500.
Build a four-step hierarchy: caption, body, subheading (600), page title (600–700) in one screen mock.
Open Similar if the lead candidate lacks weights or feels too common in your competitor set.
Confirm web embedding and app redistribution on the official source page before updating design tokens.
UI-focused app features
Size slider down to 12px to stress-test labels and dense data tables.
Category filters for sans, monospace, and Korean-first families without opening five separate sites.
Similar-font graph to pivot from Inter, Geist, or Pretendard to less overused alternatives.
License hints surfaced next to each card for quick commercial-use screening.
