In short
Choose a typeface tested for legibility at small UI sizes (not just display sizes), with a wide weight range for hierarchy, good number/tabular figure support for data-heavy screens, and pair it with at most one secondary typeface used sparingly.
Product typography is a different problem than brand typography
A typeface picked for a homepage hero or a logo lockup is optimized for impact at large sizes. A product typeface has to remain legible in a dense settings table at 13px, in a form label, in a data table with hundreds of rows. Many beautiful display typefaces fail this test badly — choosing typography for a product means testing at the smallest sizes first, not the largest.
What to check before committing
- x-height. Taller lowercase letters (relative to cap height) generally read better at small sizes — it's one of the most reliable predictors of small-size legibility.
- Character distinction. Can you tell
1,l, andIapart at a glance? Can you tell0andOapart? This matters enormously in forms, codes, and data. - Weight range. You need enough distinct weights (typically regular, medium, semibold at minimum) to build hierarchy without relying purely on size and color.
- Tabular figures. For any product with numeric tables, dashboards, or pricing, figures that align in fixed-width columns are essential — check the typeface supports this as a feature.
Variable fonts as the practical default
A variable font (like Geist, Inter, or many modern system fonts) ships every weight in a single file, which simplifies both design (you can use any weight without adding a new font file) and performance (one file instead of five). Unless there's a specific reason not to, defaulting to a variable font family removes a whole category of decisions and performance tradeoffs later.
Pairing fonts, if you pair at all
Most products are better served by one typeface family used consistently — differing only in weight and size for hierarchy — than by pairing two different typefaces. If you do pair (a distinct display face for headlines, a workhorse face for body/UI), keep the pairing to exactly two, and use the second one sparingly and consistently, never for both headlines and body copy interchangeably.
Building a type scale
Define a limited set of sizes (commonly 5-8) using a consistent ratio, rather than picking sizes ad hoc per screen. A modular scale (each step multiplying the previous by a fixed ratio like 1.2 or 1.25) produces a hierarchy that feels intentional; ad hoc sizing across a product tends to accumulate inconsistent, nearly-but-not-quite-matching sizes that read as sloppy over time. See how to set up a type scale with CSS variables for implementation.
Licensing and self-hosting
Check licensing early — some typefaces restrict web embedding or charge per-pageview at scale. Self-hosting font files (rather than relying on a third-party CDN) also improves both performance and privacy, and removes a dependency on an external service staying available.
A practical shortlist approach
Rather than evaluating dozens of typefaces, shortlist three to five that pass the legibility and weight-range checks above, then actually build a real settings screen and a real data table in each before deciding — abstract type specimens rarely reveal how a font performs under real product pressure.
Keep reading: Building a Design System That Scales.
For the underlying standards, see the W3C Design Tokens Community Group.
Common questions
Should I use a different font for headlines and body text?
Often no — one consistent family across weights reads as more intentional than pairing, unless the pairing is used sparingly and consistently for a specific, limited purpose like display headlines only.
What's the safest typeface choice for a data-heavy product?
A variable font with strong tabular figure support, a tall x-height, and clearly distinct characters for 1/l/I and 0/O — these traits matter more in dense UI than in marketing typography.
Is it worth using a custom brand typeface for the product UI?
Only if it's been specifically tested at small UI sizes — many brand typefaces are designed for large-scale display use and perform poorly in dense interfaces without modification.