Websites
Font pairings for websites: what 13 site plans chose
A website font pairing works when the heading font carries the personality and the body font stays plain and readable at small sizes. In 13 AI site and app plans, 8 paired the serif Fraunces with the sans serif DM Sans, and only 5 plans used anything else, each for a clear reason.
Nuwan Madhusanka · Co-founder
4 min read · Published
A good font pairing for a website sets an expressive heading font against a plain, readable body font, and two families are enough. In 13 AI site and app plans, 8 paired the serif Fraunces for headings with DM Sans for body text; the other 5 chose a grotesk, a geometric sans or Inter for clear reasons.
Where the pairings come from
When OneCraft plans a website or app, the plan includes a design direction with a type line naming the heading and body fonts, beside the palette, the hero and the motion. The table reads those lines from OneCraft’s development project on 21 October 2026, one plan per business and job type, the latest completed pipeline run: 11 websites and 2 apps.
Caveats. n is 13, from briefs the team wrote, several of them for calm studios near the sea, which pushes the sample toward soft, warm choices. All ran on one environment, and the planner changed during the week. So read the table as how a planner matched type to a kind of business, not as a ranking of fonts.
The default pairing: a soft serif over a plain sans
Fraunces with DM Sans appeared in 8 plans: two yoga studios, the yoga app, a reformer pilates studio, a pottery studio, a ceramics shop, a sourdough course and a dog hotel. Six of those plans gave the style word Soft, and their concepts used words like calm, warm, tactile and unhurried. A serif with soft curves in large headings reads as handmade and gentle; DM Sans in the body keeps menus, prices and timetables crisp.
The lesson is not that Fraunces suits everyone. It is that one heading font with a character, used large, plus one quiet body font, covers most small businesses whose selling point is care or craft.
When the plans chose something else
- Outfit + DM Sans, 2 plans: a dog walker and a kayak hire. Both concepts were bright and friendly, sunny rather than calm. A rounded geometric sans heading feels cheerful without the bookish note of a serif.
- Bricolage Grotesque + DM Sans, 1 plan: a volunteer running club. The concept was energetic, with huge uppercase headlines and dark navy bands, like a Saturday start line. A bold grotesk carries that; a soft serif would not.
- Fraunces + Inter, 1 plan: a branding agency. The concept was a magazine: big serif type, thin rules and large photography. The serif stays, and Inter in the body gives a cooler, more businesslike voice than DM Sans.
- Manrope + Inter, 1 plan: a cleaning company’s staff app. No customers see it. The concept was one glance at today’s shift and one big button, so both fonts are plain sans serifs chosen for quick reading.
Across all 13 plans, the body font was DM Sans 11 times and Inter twice. The variety lived entirely in the headings.
How to choose your own pairing
- Pick the heading for the feeling. Calm and crafted: a soft serif. Bright and friendly: a rounded or geometric sans. Bold and sporty: a heavy grotesk. Editorial: a high contrast serif. See what a display font is.
- Pick the body for reading. A plain sans serif with open shapes, tested at 16 pixels on a phone, in a long paragraph and in a price table.
- Use few weights. A regular and a bold for body, one or two for headings. What font weight is explains the numbers.
- Check them together in a real heading over a real paragraph, not in a specimen. What font pairing is covers the principles.
- Load them well. WOFF2 files, preload the main one, a fallback while loading, as web.dev’s font guide recommends.
On OneCraft, the planner proposes the pairing from your brief, and the generator brief can also take your brand kit; see the website brand kit page. For colours planned alongside these fonts, read website color schemes by business type, and for what the same plans put on the home page, homepage sections. An app based on one of your websites can take its fonts and colours, as the AI app builder and the website to mobile app pages describe.
| Heading + body | Plans | Kinds of business | Style word |
|---|---|---|---|
| Fraunces + DM Sans | 8 | Yoga studio (site and app), second yoga studio, pilates, pottery, ceramics shop, sourdough course, dog hotel | Soft (6), none (2) |
| Outfit + DM Sans | 2 | Dog walking, kayak hire | Soft (2) |
| Fraunces + Inter | 1 | Branding agency with a client portal | Editorial |
| Bricolage Grotesque + DM Sans | 1 | Volunteer running club | Bold |
| Manrope + Inter | 1 | Cleaning company staff app | none |
Questions people ask
What makes a good font pairing for a website?
Contrast in role and harmony in feel. The heading font can be expressive, a serif or a strong grotesk, while the body font is a plain sans serif that reads well at 16 pixels on a phone. Two families are enough. If both fonts fight for attention, or both are near twins, the pairing fails.
Is a serif heading old fashioned?
Not for warm, crafted businesses. Eight of 13 plans chose a soft serif heading for yoga, pilates, pottery, ceramics, baking and a dog hotel, where it reads as calm and handmade. A brisk or sporty business went the other way: the running club picked a bold grotesk and the dog walker and kayak hire a rounded geometric sans.
Why do so many plans use the same body font?
Because the body font's job is to disappear. DM Sans appeared in 11 of 13 plans and Inter in the other 2; both are plain, open sans serifs that stay readable at small sizes and in long passages. Personality belongs in the headings, and the body stays the same quiet voice across very different businesses.
How many fonts should a website load?
Two families, and only the weights you use. Each extra weight is another file to download before text looks right. Web performance guidance recommends WOFF2 files, preloading the one or two most important ones and a font display setting so text shows in a fallback while the font loads.
Should an app use the same fonts as the website?
Usually yes, so the business looks like itself on both. When an app is based on a website, matching the heading and body fonts is the simplest way to tie them together. A staff app used only by employees, like the cleaning crew app here, can pick plainer fonts that favour quick reading over brand voice.
Written by
Nuwan Madhusanka · Co-founder
Works across the builders and the export paths: how a form becomes a PDF, how a flyer canvas becomes a print file, and how a signed document carries its audit trail.
LinkedIn profileWritten and checked by the OneCraft team. Last checked .
Make your own website
Describe what you need and the generator writes and designs it, then you edit anything you like.
See what it can makeRead next
Social login vs email login: what 13 site plans chose
Offer email login as the base and add a social login such as Google when customers sign in on their own phones and come back often. Of 13 AI site and app plans, 8 planned both Google and email, 3 email only and 2 no sign in at all, and the 11 databases that were built carried the same choice.
How long should a flyer headline be? 168 designs measured
A flyer headline should be about four words long: that is the median across the 168 finished flyer designs on this site, and 132 of them use five words or fewer. The same headlines run to a median of 21 characters and are set about three and a half times larger than the body text, which is what lets them work from across a room.
Where to put the price on a flyer, from 168 layouts
On the 168 flyer layouts counted here, 96 show a price, and half of those put it inside the details text rather than beside the headline. The largest price on a typical layout sits in the middle third of the page at about a third of the headline's size, and only 8 layouts make the price the headline.