Font pairing for product sites: three roles, not two fonts
Font pairing on a product site is about roles: a display voice, a text face that works hard, and figures that line up. How to choose each, with pairs that work.
Font pairing advice usually starts with two fonts that look nice together. On a product site, it helps more to start from the jobs type has to do, then pick one face per job.
The three roles
| Role | Job | Chosen for |
|---|---|---|
| Display | Headlines and hero lines | Character. This is the voice. |
| Text | Body, labels, buttons, forms | Legibility at small sizes, many weights |
| Figures | Prices, stats, tables, code | Equal-width digits |
Most sites that look generic use one sans for all three, which is safe and forgettable. Most sites that look chaotic use a display face for the text role. Separate the roles and both problems go away.
Pairs that work, and why
- A serif display with a neutral sans. Fraunces or Newsreader over Inter. Reads as editorial and credible. More in serif fonts for product sites.
- A heavy poster face with a clean grotesk. One weight of something loud for the hero, Geist or Inter for everything else. Reads as confident and friendly.
- A geometric sans display with a humanist text face. Outfit over Inter. Reads as modern without being cold.
- The system stack for everything. On an app that should feel native, no web font at all. See the SF Pro font stack.
The figures role is where products differ from blogs
A product with prices, dashboards or stats needs digits that line up. A mono face like JetBrains Mono or Geist Mono does that and gives numbers a precise look, which is why so many finance and developer products use one for figures only. Tabular numbers in CSS is the lighter alternative.
Setting the pair
- Match x-heights, or size the display face so its lowercase sits right beside the text face.
- Limit weights: one or two for display, three for text.
- Write the sizes as tokens, so every heading uses the same scale.
- Preload only the display font the hero needs.
Each of our design skills ships with its three roles chosen and its sizes as tokens. Editorial Ledger UI is the serif case: Fraunces for display, Inter for text, JetBrains Mono for money, all free on Google Fonts.
Questions
How many fonts should a website use?
Two, sometimes three: a display face for headlines, a text face for everything read at length and every control, and a monospace for numbers or code if the product has many.
What makes two fonts pair well?
Contrast in character with agreement in proportion. A distinctive display face beside a quiet text face, with similar x-heights so they sit comfortably on the same line.
Do extra fonts slow a site down?
Each weight and style is a file. Variable fonts reduce that to one file per family, and preloading only the fonts used above the fold keeps the first render fast.