Quicksand + Source Sans 3
Grumpy wizards make toxic brew
A standfirst set in Source Sans 3, one size up — where a pairing starts earning trust.
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.
“Type is a beautiful group of letters, not a group of beautiful letters.”
— Matthew Carter
Fig. 1 — Quicksand over Source Sans 3, in the wild.
Quicksand 600 / Source Sans 3 400 — click any section and type your own copy.
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
<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">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;
}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",
});