Quicksand + Source Sans 3

playfulfriendlywarm

Grumpy wizards make toxic brew

The five boxing wizards jump quickly over the lazy dog, mixing jugs of quiet vodka while the jury watches. Click anywhere in this preview and type your own text to try the pairing.

Quicksand 600 / Source Sans 3 400 — click the text to edit

Why it works

Quicksand's circle-based, rounded terminals radiate friendliness at display sizes but blur into softness when set small — so it needs a body partner with firmer bones. Source Sans 3's humanist structure and open apertures provide exactly that: approachable in tone yet crisp at paragraph sizes. The pairing keeps the playful personality up top where it sells, and the workmanlike legibility below where it matters, ideal for kids' brands, wellness and consumer apps.

More about each face: Quicksand · Source Sans 3

Use this pairing

HTML — Google Fonts embed
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@600&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet">
CSS
h1, h2, h3 {
  font-family: 'Quicksand', 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
}

body {
  font-family: 'Source Sans 3', 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
}
Next.js — next/font
import { Quicksand, Source_Sans_3 } from "next/font/google";

const heading = Quicksand({
  subsets: ["latin"],
  weight: "600",
  variable: "--font-heading",
});

const body = Source_Sans_3({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-body",
});
From usKeychord— keyboard shortcuts for every app

Related pairings