Why fonts matter more than you think
Your landing page font does three jobs at once: it carries information, it sets a tone, and it signals professionalism. A bad choice whispers "this was built in 2009" or "we couldn't afford a designer". A good choice gets out of the way and lets your value proposition breathe.
SaaS visitors skim. They read headings, bullets, CTAs — rarely full paragraphs. That means you need high x-height letters, generous spacing, and clear distinction between heading and body weights. Decorative serifs and condensed grotesques fail this test. Clean, open sans-serifs win.
Most importantly: you need exactly two typefaces. One for headings, one for body text. Never three. Never one. Two gives you hierarchy without chaos.
The six fonts that actually work
These six cover 90% of SaaS landing pages that convert. All are free under the SIL Open Font License, meaning you can use them commercially without paying per-visitor fees.
Inter
The default choice for a reason. Designed specifically for screens, with a tall x-height and open apertures. Nine weights from Thin to Black. Use it for body copy at 16–18px, headings at 32–56px. Works everywhere, offends nobody, reads fast.
Best for: B2B tools, dashboards, productivity apps. Anything that wants to feel efficient and modern without trying too hard.
IBM Plex Sans
Slightly more personality than Inter, with a geometric skeleton and friendly curves. The italic cuts are genuinely good, which matters if you emphasize words inline. Seven weights. Pair it with IBM Plex Mono for code snippets.
Best for: Developer tools, API platforms, data products. Signals technical competence without the coldness of Helvetica.
Manrope
Rounded terminals, low contrast, warm feel. Eight weights. It's the friendliest option on this list while staying professional. Use Regular at 17px for body, ExtraBold for big headings.
Best for: Collaboration software, consumer-facing SaaS, anything targeting non-technical users. Feels approachable, not corporate.
Work Sans
Originally designed for headlines, so the heavier weights (SemiBold through Black) shine there. Pair with a different body face. Slightly condensed, good for fitting long headlines into narrow columns.
Best for: Marketing sites where the hero headline is long. Fintech, compliance tools, anything serious but not stodgy.
JetBrains Mono
A monospace font that doesn't look like a typewriter. Tall x-height, increased letter spacing, ligatures for common code pairs. Use it only for code blocks, API endpoints, terminal commands — never body text.
Best for: Developer-facing content, technical documentation, CLI tool landing pages.
Space Grotesk
Geometric with character. Based on Space Mono but proportional. The quirks (especially the capital 'A' and 'M') make it memorable without being distracting. Five weights.
Best for: Crypto, web3, design tools, anything that wants to stand out slightly from the Inter-everywhere sameness.
How to pair fonts without looking like a ransom note
The safest pairings share a skeleton but differ in weight or style. Inter Bold for headings, Inter Regular for body. Done. But if you want contrast, follow these rules:
Rule one: same x-height
Your heading font and body font should have similar x-heights — the height of lowercase letters like 'x' and 'a'. If they don't match, the page rhythm breaks. Inter and IBM Plex Sans pair well because both have tall x-heights. Work Sans and Manrope clash because Work Sans sits lower.
Rule two: shared origin
Fonts from the same type family are designed to work together. IBM Plex Sans + IBM Plex Mono is foolproof. Inter + JetBrains Mono works because both were designed for the same use case: screen readability.
Rule three: contrast structure, not personality
Pair a geometric sans (Space Grotesk, Manrope) with a grotesque sans (Inter, IBM Plex Sans) and you get visual interest. Pair two geometric sans-serifs and they blur together. Pair a script font with a rounded sans and you get a design student's portfolio, not a SaaS landing page.
Here are three proven pairs:
- Work Sans Bold + Inter Regular: Serious headings, neutral body. Good for fintech, legal tech, compliance.
- Space Grotesk SemiBold + IBM Plex Sans Regular: Distinctive headings, readable body. Good for crypto, design tools, dev platforms.
- Manrope ExtraBold + Manrope Regular: Same family, big weight jump. Friendly, approachable, safe. Good for collaboration tools, team software.
Typographic hierarchy for landing pages
Hierarchy means visitors know what to read first. You build it with size, weight, and spacing — not by adding more fonts.
Hero heading
48–72px on desktop, 32–40px on mobile. Bold or ExtraBold. This is your H1. One per page. It should be the biggest, darkest text on the screen.
Section headings
28–36px on desktop, 24–28px on mobile. SemiBold or Bold. These are your H2s. They break the page into chunks. A visitor should be able to skim these alone and understand your offer.
Sub-headings
20–24px, Medium or SemiBold. H3s. Use sparingly — only when a section is long enough to need internal structure.
Body text
16–18px, Regular weight. Line height 1.5–1.6. Never smaller than 16px. Visitors over 40 will leave if your body text is 14px.
Captions and labels
14–15px, Regular or Medium. Use for image captions, form labels, fine print. Go smaller than 14px and you're in GDPR-cookie-banner territory.
Buttons and CTAs
15–17px, Medium or SemiBold. Slightly heavier than body text so they feel clickable. All caps is a trap — it slows reading speed by 20%.
Free fonts vs paid licences
Every font listed here is free under the SIL Open Font License. That means you can use it on a commercial website, in your app, in marketing materials — no per-seat fees, no traffic limits, no invoice at year-end.
Paid fonts (from foundries like Grilli Type, Commercial Type, or Klim) cost €200–€2,000 per style for a web licence. They're worth it if typography is your brand differentiator — think Stripe (custom font), Linear (custom font), Figma (custom font). But if you're validating a SaaS idea or running a €29/month project in Marcus Builder, a paid font is a vanity expense.
The one exception: if your competitor uses Inter and you need to look different, spending €300 on a Grilli Type licence might be cheaper than a rebrand later. But test your idea first.
How to load fonts without killing page speed
Web fonts add 20–100KB to your page weight. That's fine if you load them correctly. Do it wrong and your text is invisible for two seconds while the font downloads.
Use font-display: swap
This CSS property tells the browser to show text in a fallback font (Arial, system-ui) immediately, then swap in the web font when it loads. No blank screens.
Only load the weights you use
If you're using Inter Regular and Inter Bold, don't load all nine weights. Google Fonts lets you select specific weights in the embed URL. A two-weight setup adds ~30KB. A nine-weight setup adds ~120KB.
Subset to Latin characters
Unless you're serving content in Cyrillic, Greek, or Vietnamese, subset your fonts to Latin-only. Cuts file size by 40%.
Marcus handles this automatically when you specify fonts in a prompt. We load only the weights and character sets your page actually uses, delivered via Google Fonts CDN with proper caching headers.
How to specify fonts in a Marcus prompt
When you're briefing Marcus, be specific about typefaces. Vague requests like "make it modern" get you generic results. Here's what works:
Explicit pairing
"Use Work Sans Bold for headings and Inter Regular for body text. Hero heading should be 56px, section headings 32px, body 17px."
Mood + example
"Friendly and approachable, like Notion or Slack. Use Manrope ExtraBold for headings, Manrope Regular for body."
Reference site
"Typography similar to linear.app — clean, technical, lots of hierarchy. Use IBM Plex Sans."
If you don't specify, Marcus defaults to Inter across the board with a sensible hierarchy. That's fine for internal tools or MVPs. But if you're launching to customers, take 30 seconds to name your fonts.
Three font mistakes that kill conversions
Too many weights
Loading Regular, Medium, SemiBold, Bold, ExtraBold because you "might need them" slows your page and creates decision paralysis. Pick two weights: one for headings, one for body. If you need a third, you've overcomplicated your layout.
Body text below 16px
15px might look "cleaner" on your 27-inch monitor. On a phone, or for anyone over 35, it's a squint-test. Accessibility guidelines (WCAG AA) recommend 16px minimum. Follow them.
Monospace for body copy
JetBrains Mono is beautiful for code. It's unreadable for paragraphs. Monospace fonts have fixed character width, which breaks natural word rhythm. Use them only for inline code, terminal outputs, or API examples.
How to test if your font choice works
Open your landing page on a phone. Hold it at arm's length. Can you still read the hero heading? The CTA button? If not, increase your sizes.
Squint at your page. Do the headings still stand out? If everything blurs into one grey block, your hierarchy is broken. Add weight or size to headings.
Ask someone who isn't a designer to scan your page for 5 seconds and close it. Can they recall your main offer? If not, your typography isn't doing its job — which is to guide the eye to the value proposition.
Finally, check page speed. Run Lighthouse in Chrome DevTools. If your font files push First Contentful Paint above 1.5 seconds, you've loaded too much. Strip out unused weights.