Fontduet

The SaaS marketing stack

Outfit for headings · DM Sans for body · Roboto Mono for code — all three set live below.

Display · Outfit 700

Details make the difference

Body · DM Sans 400

Good type pairing is quiet craft: a display face with character, a body face that gets out of the way, and a monospace that keeps code honest. Set them together and a page finds its rhythm — headings announce, paragraphs settle, and the details stay precise.

Mono · Roboto Mono 400
function pair(display, body, mono) {
  return { display, body, mono }; // three roles, one system
}

Why these three

A marketing landing page needs a confident headline, effortless body copy and a mono for the code proof that sells to developers. Outfit's tight geometric bold makes hero lines feel crisp and current at large sizes. DM Sans keeps subheads and feature copy friendly and low-contrast so nothing competes with the call to action. Roboto Mono handles the API-key snippet or install command in the how-it-works section — a familiar, unfussy mono that reads as legitimate tooling without pulling attention from the pitch above it.

Copy the CSS

CSS — all three roles
:root {
  --font-display: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Roboto Mono', 'Courier New', Courier, monospace;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
}

code, pre, kbd {
  font-family: var(--font-mono);
  font-weight: 400;
}
From the same deskKeychord— keyboard shortcuts for every app

Read more

More about each face: Outfit · DM Sans · Roboto Mono

Choosing type for this? Fonts for landing pages →