Every setting below is live type, not a picture of it. When it reads right, take the file: the cutter runs in this tab — it walks the outlines at your weight, bakes in the letterforms you picked, and hands back a static font. Nothing is uploaded, and no server sees the setting.

Width and tracking travel with the file. transform:scaleX() stretches what is painted and leaves the layout box where it was; a font that is really wider carries the width in its advances too. So a cut taken here needs no CSS to keep the setting you gave it.

Five presets ship with the family. Zoo uses .zen-round, .zen-book, .zen-medium — the others are there when a surface needs them. Each is one point in Zen's parameter space. Click a row to load it above.

Voice: Zen as drawn — the humanist default, and the warmest. The estate default is normal, so a brand opts into its letterform.

Every glyph is 0.6 em wide, so a column of code is a column. The pairs a screen of code turns on are kept apart out of the box: the zero comes slashed, and 1, l and I each stand on a foot, so none of them is a bare stroke.

const cut = await zen.cut({
  weight: 497,      // anywhere on 100–900
  forms: ['ss01'],  // baked into the outlines
})
// 0O o · 1lI · rn m · ;:, · {}[]()
for (let i = 0; i <= 0xFF; i++) draw(i)

The sets go the other way here, because the defaults already favour code: ss09 takes the slash back out of the zero and ss03 swaps the l's foot for a tail. Both are in the editor above, and both survive into a cut you take.

Pixel is drawn out of an element — a square, a circle, a triangle — and the element is an axis, not five files. The named cuts are five stops on it, and everything between them is a cut too.

The strip above runs the axis end to end. Pick a stop to load it into the editor, or drag Element there for the space between.

Zen is variable on wght 100–900, so one file covers every weight — no nine static cuts, and no second request when a page needs a bolder line.

Then name the role, never the face: var(--font-sans), var(--font-mono), var(--font-pixel). A surface on @hanzo/design gets them with the token layer and needs no font import at all — which is what keeps every Zoo property on one version of the type as the family evolves.

The variable file is the desktop install — one file, every weight, and every current system reads it. A named static cut is what the editor above makes, so it is not hosted nine times over here. The .woff2 statics are for a stylesheet that wants a fixed weight without an axis.

Licensed under the SIL Open Font License — the notice travels in LICENSE.txt and in each file's own name table.