Type directions — everything
ten options · three sections · pick one

Everything on one page. Three sections: Garamond 500 + sans (your pick, three sans variants side-by-side), Serif-led swings, and Sans-led / earned-mono outliers. No monospace in body copy — except M, which uses it as a deliberate editorial device. All display at their natural sizes.

Garamond N1N2N3
Serif swings HIKL
Sans-led / mono JM
§ 01

Garamond 500 + three sans

your favorite · find the right sans partner
Option N1

Garamond + Inter

"Safe, modern, invisible sans. The default-good choice."
Display
EB Garamond 500
Body + UI + numerals
Inter
Character
Neutral, readable
§01 · The Stack
A small stack for UI code that can be proven, not just shipped.

Three primitives that stack. pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source — so callers of measureCaption know by construction that the result fits its width.

Primitives3
Render loops1
Browsers in proof path0
Demos planned6
Option N2

Garamond + Inter Tight

"Same neutral base, slightly more editorial. A hair more considered."
Display
EB Garamond 500
Body + UI + numerals
Inter Tight
Character
Tighter tracking echoes display
§01 · The Stack
A small stack for UI code that can be proven, not just shipped.

Three primitives that stack. pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source — so callers of measureCaption know by construction that the result fits its width.

Primitives3
Render loops1
Browsers in proof path0
Demos planned6
Option N3

Garamond + DM Sans

"Humanist sans + humanist serif. The warmest, most editorial pair."
Display
EB Garamond 500
Body + UI + numerals
DM Sans
Character
Rounder forms, matches old-style serif
§01 · The Stack
A small stack for UI code that can be proven, not just shipped.

Three primitives that stack. pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source — so callers of measureCaption know by construction that the result fits its width.

Primitives3
Render loops1
Browsers in proof path0
Demos planned6
Property
N1 · Inter
N2 · Inter Tight
N3 · DM Sans
Feel
Neutral · modern · safe
Slightly editorial · tightened
Humanist · warm · book-like
Pairs with Garamond
Politely — stays out of the way
Well — shares display's tight tracking
Beautifully — same old-style DNA
Numerals at 30px
Clean · contemporary
Clean · a touch sharper
Slightly softer · rounder
Risk
A bit anonymous
Small · shares Inter family
Popular in 2023–24 design blogs
§ 02

Other serif-led directions

if not Garamond · fair to compare
Option H

Source Serif + Inter Tight

"Scholarly headline, modern chassis, honest sans numbers."
Display
Source Serif 4 (opsz 60)
Body + UI + numerals
Inter Tight
Mono
None
§01 · THE STACK
A small stack for UI code that can be proven, not just shipped.

Three primitives that stack. pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source — so callers of measureCaption know by construction that the result fits its width.

Primitives3
Render loops1
Browsers in proof path0
Demos planned6
Option I · editorial

Libre Caslon — top to bottom

"The New York Review of Books. Unapologetically a document."
Display
Libre Caslon Display
Body
Libre Caslon Text
Numerals + UI
Inter Tight
§01 · THE STACK
A small stack for UI code that can be proven, not just shipped.

Three primitives that stack. pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source — so callers of measureCaption know by construction that the result fits its width.

Primitives3
Render loops1
Browsers in proof path0
Demos planned6
Option K · fashion

Playfair + Archivo

"Fashion magazine review of a software paper. Tall ascenders, big teeth."
Display
Playfair Display 500
Body + UI
Archivo
Numerals
Archivo 800 (tabular)
§01 · THE STACK
A small stack for UI code that can be proven, not just shipped.

Three primitives that stack. pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source — so callers of measureCaption know by construction that the result fits its width.

Primitives3
Render loops1
Browsers in proof path0
Demos planned6
Option L · conceptual

Cormorant giant · Work Sans tiny

"Giant whisper. Scale-as-hierarchy, not weight-as-hierarchy."
Display
Cormorant Garamond (huge)
Body + UI
Work Sans (small)
Numerals
Work Sans 600
§01 · THE STACK
A small stack for UI code that can be proven, not just shipped.

Three primitives that stack. pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source — so callers of measureCaption know by construction that the result fits its width.

Primitives3
Render loops1
Browsers in proof path0
Demos planned6
§ 03

Sans-led · earned-mono outliers

different worlds — contemporary · typewriter-book
Option J · current

Syne + Manrope

"Read.cv / Arena. Weird where it counts."
Display
Syne 700
Body + UI
Manrope
Numerals
Syne (tabular)
§01 · THE STACK
A small stack for UI code that can be proven, not just shipped.

Three primitives that stack. pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source — so callers of measureCaption know by construction that the result fits its width.

Primitives3
Render loops1
Browsers in proof path0
Demos planned6
Option M · earned mono

PT Serif + PT Mono

"A technical book from the '70s. Mono used on purpose, as a device."
Display + body
PT Serif
Labels + numerals
PT Mono
Note
Lowercase labels, no caps tracking
§01 · the stack
A small stack for UI code that can be proven, not just shipped.

Three primitives that stack. pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source — so callers of measureCaption know by construction that the result fits its width.

primitives3
render loops1
browsers in proof path0
demos planned6
Where each one lives

N1 / N2 / N3 · Garamond — your favorite display. N1 Inter is neutral, N2 Inter Tight echoes the tight display tracking, N3 DM Sans is the warmest and most editorial.

H · Source Serif + Inter Tight — scholarly, Stripe-Press-adjacent. Your fix for the original D, with sans numbers.

I · Libre Caslon — full editorial conviction. Body in a classical serif reads as "a real publication wrote this".

K · Playfair + Archivo — highest-contrast serif in the set. Dramatic teeth; fashion-meets-tech.

L · Cormorant giant + Work Sans tiny — scale-as-hierarchy. One huge whisper. Unique but harder to scale to six sections.

J · Syne + Manrope — the only sans-only, for contrast. Geometric weirdness as personality.

M · PT Serif + PT Mono — the earned-mono outlier. Used Swiss-book-style it's a deliberate 20th-c. technical-book gesture, not a Vercel clone.

Tell me a letter (or a mix — e.g. "N3's pairing but I's display size") and I'll rebuild the manifesto on it.