Recursive
by Stephen Nixon · ArrowType · 2020 · variable
One variable family that morphs from a warm sans to a code mono, with a Casual axis that adds marker-pen flair.
Preview
Pair it with another font →Recursive is five typefaces pretending to be one file. The MONO axis slides it from a
proportional sans to a fixed-width code font; CASL warms it from neutral to hand-drawn; CRSV
and slnt handle the italic. In practice you pick two or three settings and never touch them
again — but having sans and mono that are unmistakably siblings is genuinely useful for docs and
dev tools.
The catch is discipline. With this many axes it’s easy to ship an inconsistent set of instances, and the heaviest weights (up to 1000) get very dense. Decide your combinations up front and lock them into CSS custom properties.
Best for
Where Recursive earns its place — and why. My opinion, not a rule.
- Developer tools
It was drawn for exactly this — ArrowType's brief was "code & UI" — and the sans and mono are siblings, so a docs page and a terminal snippet stay in one voice.
- Product UI
Every style holds the same character widths, so switching weight or slant never reflows a menu or a button.
- Documentation
One family covers prose and code blocks, which saves you a second webfont and a pairing decision.
- Code
Push the MONO axis to 1 and you get a real coding face, with a Casual axis if you want it warmer.
Get it
Pick the one that fits your setup. Self-hosting is best for production; the CDN link is quickest to try.
pnpm add @fontsource-variable/recursive
# npm install @fontsource-variable/recursive
# yarn add @fontsource-variable/recursiveimport '@fontsource-variable/recursive';
/* then, in your CSS */
font-family: 'Recursive Variable', sans-serif;Fontsource appends “Variable” to the family name for variable fonts — use “Recursive Variable”, not “Recursive”.
import { Recursive } from 'next/font/google';
const recursive = Recursive({
subsets: ['latin'],
display: 'swap',
axes: [],
});
// <body className={recursive.className}>Self-hosted and optimised at build time — no network request to Google.
<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=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap"
rel="stylesheet"
/>
/* CSS */
font-family: 'Recursive', sans-serif;Quickest to paste in, but adds a third-party request. Prefer self-hosting for production.
/* Download the OFL-1.1 files from the source below, then: */
@font-face {
font-family: 'Recursive';
src: url('/fonts/recursive.woff2') format('woff2');
font-weight: 300 1000;
font-display: swap;
}Files: https://github.com/arrowtype/recursive
Add the "Recursive" font to this project.
- CSS family name once loaded: 'Recursive Variable'
- Fallback stack: sans-serif
- Variable font. Axes: wght 300–1000, MONO 0–1, CASL 0–1, slnt -15–0, CRSV 0–1
- Fontsource package (self-hosted, npm): @fontsource-variable/recursive
- next/font/google export name: Recursive
- Google Fonts CDN family param: Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1
- License: OFL-1.1 — Free for commercial use — self-host, bundle, and modify freely; only reselling the font files on their own is prohibited.
- Source: https://github.com/arrowtype/recursive
Detect how this project already loads fonts (Fontsource import, next/font, Tailwind @theme, plain @font-face) and follow that pattern. Prefer self-hosting over the Google Fonts CDN link for production.Paste into Claude Code, Codex, T3 Code, Cursor or similar — it has what an agent needs to wire the font up itself.
Seen on
Real sites using Recursive. Click through to see it live.
