Typography

Geist for headings and text, Geist Mono for code. Sizes are multiples of one base size; titles scale with their container.

The scale, drawn live

Each line is set in its own token. Title and display scale with the width of the container they sit in, so a block in a narrow column gets a smaller title; the pixel size shown is what it is on this page right now.

text-kh-display

Display: calm software
Page titles in heroes
text-kh-title

Title: calm software
Section titles
text-kh-heading

Heading: calm software
Item titles
text-kh-lead

Lead: calm software
Section descriptions
text-kh-body

Body: calm software
Body text
text-kh-small

Small: calm software
Secondary text, labels
text-kh-caption

Caption: calm software
Captions, meta, badges

Geist, sans and display

Weight 400: the quick brown fox

Weight 500: the quick brown fox

Weight 600: the quick brown fox

Geist Mono, code

const style = { radius: 8 };

0123456789 { } [ ] ( ) =>

Type scale

Base size 16 px. Title and display are fluid in the block's container width (cqi), not the viewport.

Tailwind	Size	Use for
`text-kh-caption`	`size × 0.8125`	Captions, meta, badges
`text-kh-small`	`size × 0.875`	Secondary text, labels
`text-kh-body`	`size`	Body text
`text-kh-lead`	`size × 1.1875`	Section descriptions
`text-kh-heading`	`size × 1.25`	Item titles
`text-kh-title`	`fluid, 1.875 to 2.75 × size`	Section titles
`text-kh-display`	`fluid, 2.5 to 4.5 × size`	Page titles in heroes

Fonts a style can use: Geist, Geist Mono, Inter, Space Grotesk, DM Sans, Instrument Serif, Fraunces, JetBrains Mono.

Rules

Readable first.

Headings balance

Headings use text-wrap: balance and paragraphs text-wrap: pretty, so no line is left with one word.

Muted text

Do not set essential content in muted colour below the small size.