Showroom · Build notes

How the Fraunces specimen was made

A type specimen where the type is the only performer: one Google Fonts request, four real axes, and a headline that morphs under your pointer without a single image, canvas, or library.

What it demonstrates

That a variable font is an instrument, not a file format trivia point. Everything expressive on the page — the morphing hero, the marshmallow-soft presets, the wonky alternate letterforms — is the font itself being played through font-variation-settings. The page stays honest about what is real: Fraunces genuinely contains the four axes on show, and the specimen says which are registered and which are the designers’ own.

Techniques, honestly named

• Real axes, verified — Fraunces by Undercase Type ships opsz 9–144, wght 100–900, SOFT 0–100, and WONK 0–1; the Google Fonts request loads exactly those ranges and nothing is faked with transforms.
• Pointer-driven morph — hero pointer position maps to weight and optical size targets, eased by a requestAnimationFrame lerp that stops itself when it arrives and pauses when the tab hides.
• Custom properties as the single source — sliders write --opsz/--wght/--soft/--wonk; CSS consumes them in one font-variation-settings declaration, so JS never styles elements.
• Preset recipes — four named coordinate sets (Footnote, Display, Marshmallow, Inkwell) that snap all four sliders at once.
• Editable proof — a contenteditable paragraph with a size slider, so visitors set their own words in the current coordinates.
• Respectful fallbacks — reduced motion disables the morph and rewrites the hint; touch-only devices get slider-first copy instead of pointer talk.

Recreate it