Serif fonts on a product website: when they work and how to set them
A serif headline can make a product site look credible instead of techy. Which serifs work on screens, where to use them, and the settings that keep them crisp.
Most product sites use the same geometric sans, which is part of why they look alike. A serif headline changes the register of a page immediately: from app to publication, from startup to institution. That is useful when what you sell depends on being believed.
Serif for display, sans for work
The pairing that works almost everywhere: a serif for headlines and large figures, a plain sans for body text, labels and buttons, and a mono for numbers if the product has many of them. The serif sets the tone; the sans does the work of being read quickly. We go deeper on this in font pairing for products.
Picking a serif that survives the screen
- A variable font, so weight and optical size are tuned by CSS instead of by loading five files.
- Generous x-height and open counters, so it stays readable when a headline wraps on a phone.
- An italic that looks designed, because an italic second line is one of the best-looking moves a serif headline has.
Fraunces is a good example of what variable axes can do: besides weight it has SOFT and WONK axes that change how warm or quirky the letters are. Used lightly, those give a headline character without a custom font.
Settings that keep it crisp
h1, h2 {
font-family: "Fraunces", Georgia, serif;
font-variation-settings: "SOFT" 50, "WONK" 0;
font-weight: 500;
letter-spacing: -0.015em;
line-height: 1.05;
text-wrap: balance;
}Tight but not crushed tracking at large sizes, leading close to one because display lines are short, and text-wrap: balance so a two-line headline does not leave one word alone on the second line.
Where it goes wrong
- Serif body text at 14px on a dense interface. Keep interface text sans.
- Two serifs on one page. One is a voice; two is an argument.
- A serif on everything, including buttons and table headers. It stops meaning anything.
Editorial Ledger UI is built on this pairing: Fraunces with its SOFT and WONK axes for display, Inter for text, JetBrains Mono for money, on paper and coal grounds, so Claude sets headlines like a publication rather than a template.
Questions
Are serif fonts hard to read on screens?
Not on modern high-resolution screens and not at heading sizes. Small serif body text on low-resolution displays was the old problem. A serif for headings with a sans for body and interface text avoids it entirely.
Which free serif fonts work well for headings?
Variable serifs on Google Fonts such as Fraunces, Newsreader and Source Serif 4 hold up well at large sizes, and variable axes let you tune weight and softness without loading extra files.
Can a SaaS product use a serif?
Yes, and it is one of the quickest ways to stop looking like every other SaaS template. It suits products that sell trust: finance, research, publishing, premium services.