Vincent Vi

Tinkering · experiment 002

Variable font playground

Three typefaces, one instrument. Pick a font, then drag the sliders and watch the letterforms change shape in real time — this is what "variable font" actually means. Each font exposes only the axes it was drawn with.

✎ Click the text below and type your own

Gradatim Ferociter
Jump to:

How it works

A variable font ships one file containing a continuous space of possibilities along named axes — instead of separate files for bold, light, and italic. Each control writes to font-variation-settings, and the browser re-interpolates the outlines instantly. No images, no separate files. Switch typefaces above and the control panel changes with it: a font can only offer the axes its designer actually drew.

Recursive is a functional sans built for play, with five dials — Casual morphs it from crisp to hand-drawn,Mono snaps toward code-like widths, and weight, slant and cursive do the familiar work. Roboto Serif is its editorial counterpart, and its headline trick is Width: push it and the whole face stretches from tall-and-narrow to wide-and-open. AddOptical size (sturdy text ↔ high-contrast display) andGrade, which darkens the strokes without moving anything — the letters get heavier but the spacing holds. Playfair is the high-contrast Didone of the group: its Optical size axis spans an enormous 5–1200, sweeping from gentle text to razor-thin hairlines set against heavy stems — push it with the weight up for full poster drama.Grenze Gotischis a legible blackletter by Omnibus-Type with a single continuousweight axis (100–900) — one dial, but watch how much the gothic forms thicken and close up. "Gradatim ferociter" — step by step, ferociously.