Pick a heading and body font pair and see it on a real landing page hero, pricing table and FAQ. Then copy the code for plain CSS, Tailwind v4 or next/font, with the download size of each font.
Ship your reports before the coffee cools
Connect your data once. Northwind writes the weekly update in your team's voice and sends it every Monday.
Simple pricing
Starter
$0
For trying it out
Team
$24
Per month, billed yearly
Scale
$79
Per month, billed yearly
Questions
Can I cancel at any time?
Yes. Cancel from the billing page and you keep access until the end of the period. We never charge for unused months.
/* npm install @fontsource-variable/plus-jakarta-sans @fontsource-variable/inter */
@import "@fontsource-variable/plus-jakarta-sans";
@import "@fontsource-variable/inter";
:root {
--font-heading: "Plus Jakarta Sans Variable", ui-sans-serif, system-ui, sans-serif;
--font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
}
body {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.6;
}
h1, h2, h3 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.15;
}
Latin subset, normal style, woff2, measured from the Fontsource files. Browsers fetch other subsets only when the page uses those characters. Italics are extra files.
Font pairing is the choice of two fonts that work together: one for headings and one for body text. A good pair gives the headings character and keeps the body easy to read.
On a SaaS landing page the heading font carries the brand in the hero, and the body font does the work in features, pricing and FAQ. Many teams skip the pair and use one family in several weights.
Use one or two font families. In our crawl of 188 SaaS homepages, 70.7% use the same family for headings and body text.
Each extra family adds a download and one more style to keep consistent. A third family is rarely worth it; use a monospace font only if you show code.
Contrast the structure, not the mood. Pair a serif heading with a sans body, or a geometric sans with a neutral grotesk. Two fonts that are almost the same look like a mistake.
Match the x-height. Fonts with a similar x-height sit well next to each other in a card or a button, and the page keeps one rhythm.
Limit the weights. Two or three weights, for example 400 for body and 600 for headings, are enough. Variable fonts give you every weight in one file.
Inter is the most common body font, on 18.1% of the sites we crawled. 70.7% of the sites use one family for headings and body, and 3.7% use the system font for body text.
The long tail is custom and licensed type, such as Aeonik or Charlie Text. Free fonts like Inter, Plus Jakarta Sans, DM Sans and Figtree cover most of the rest. We read the computed font of each heading and paragraph in a real browser.
| Body font | Sites | Share |
|---|---|---|
| Inter | 34 | 18.1% |
| Charlie Text | 5 | 2.7% |
| Aeonik | 3 | 1.6% |
| Montserrat | 3 | 1.6% |
| Figtree | 3 | 1.6% |
| system-ui | 3 | 1.6% |
| DM Sans | 3 | 1.6% |
| Salesforce Sans | 3 | 1.6% |
| Open Sans | 2 | 1.1% |
| -apple-system | 2 | 1.1% |
As of October 2026 · Source: BlockSnap crawl of 188 SaaS homepages
Inter also leads for headings, on 10.6% of the sites. Heading fonts are more spread out than body fonts, because the hero is where a brand shows its type.
| Heading font | Sites | Share |
|---|---|---|
| Inter | 20 | 10.6% |
| Plus Jakarta Sans | 4 | 2.1% |
| Aeonik | 3 | 1.6% |
| Figtree | 3 | 1.6% |
| system-ui | 3 | 1.6% |
| DM Sans | 3 | 1.6% |
| Poppins | 3 | 1.6% |
| Charlie Display | 3 | 1.6% |
| Charlie Text | 2 | 1.1% |
| Montserrat | 2 | 1.1% |
As of October 2026 · Source: BlockSnap crawl of 188 SaaS homepages
BlockSnap builds your SaaS landing page from proven sections, and you can set the heading and body fonts in one place.
Get early access