For about ten years, every SaaS site looked typographically identical: a clean, neutral sans-serif for everything, usually Inter or something close to it. Safe, legible, and completely interchangeable. In 2026 that's changing - the products that look most distinctive are leading with a characterful serif for their headlines, and it's the single fastest way a site now signals taste. Here's why the serif revival happened and how to use one without looking like a wedding invitation.
Why sans-everywhere got boring
There was nothing wrong with Inter. That was the problem. When every startup uses the same neutral sans for headlines and body, typography stops carrying any personality - it becomes a delivery mechanism for words and nothing more. Once a look becomes universal, it stops signaling "modern" and starts signaling "default." The serif revival is a reaction to that sameness: a display serif immediately makes a page feel like someone made a choice.
The new serifs aren't your grandfather's serifs
This isn't Times New Roman. The serifs driving the trend are modern, variable, and full of character - faces like Fraunces, Instrument Serif, GT Sectra, and the new wave of expressive display serifs. They have high contrast, distinctive details, and optical sizing that lets them go from elegant at large sizes to sturdy at small ones. Used big, they carry a page. The move is editorial - closer to a magazine masthead than a corporate letterhead.
How to pair without looking dated
The winning formula is contrast: a characterful serif for display, a clean sans or mono for everything functional. The serif provides personality where it's read slowly (headlines, hero, pull quotes); the sans provides clarity where it's read fast (body, UI, labels). Mixing them is what makes it feel intentional rather than nostalgic.
/* Display serif + clean body sans + mono for data */
@theme {
--font-display: "Fraunces", serif; /* headlines only */
--font-body: "Hanken Grotesk", sans-serif;
--font-mono: "Geist Mono", monospace; /* labels, prices, code */
}
h1, h2, .display { font-family: var(--font-display); }
body { font-family: var(--font-body); }
.label, .price { font-family: var(--font-mono); }
The rules that keep it tasteful
- Serif for display only - headlines, hero, quotes. Never set body text in a display serif.
- Maximize the contrast - a big elegant serif over a small clean sans reads as considered; two similar faces read as an accident.
- Use optical sizing if the face has it, so the serif looks right large and small.
- One serif, used with intent - a second decorative face is one accessory too many.
- Let the serif be the personality, and keep everything around it quiet.
Typography is the cheapest way to make a product look like it has a point of view. Swapping a neutral sans headline for a characterful serif - and keeping the body clean - changes the entire personality of a page without touching the layout.
Top comments (0)