One font, four axes. Drag the sliders to morph weight, slant, casual style, and monospace — all in one continuous font file.
A variable font ships one file that contains an infinite range of variations along multiple "axes" — weight, italic, width, optical size, and custom axes like "casual" or "monospace". You set them via CSS font-variation-settings with numeric values. The same font that says "Hello" at weight 100 can say it at 947. The same headline can morph live on hover. This is what makes type feel alive in 2025.
Load a variable font (we use Recursive, which has 5 axes). Apply font-variation-settings: 'wght' 600, 'slnt' 0, 'CASL' 0, 'MONO' 0 on the element. Wire each axis to a CSS custom property (var(--wght, 600)) and update that property from a <input type="range"> oninput. Transition the variation settings for buttery axis morphing. Common axes: wght (weight), wdth (width), slnt (slant), opsz (optical size), plus designer-specific custom axes.
Drag the sliders. Watch the headline morph along each axis in real time.
Using Recursive — a 5-axis variable font designed for code and UI by Stephen Nixon. Free on Google Fonts.
Build an interactive variable-font playground. Load Recursive from Google Fonts with all 5 axes (slnt, wght, CASL, CRSV, MONO) — use the long axis URL with the variation ranges. Big specimen text "Hello, world." at clamp(64px, 11vw, 140px), font-family Recursive, with font-variation-settings:'wght' var(--wght, 600), 'slnt' var(--slnt, 0), 'CASL' var(--casl, 0), 'MONO' var(--mono, 0). Add transition:font-variation-settings 0.18s ease for smooth morphing. Below it, a panel with 4 styled range sliders (custom thumb design — dark filled circle with white border), each with a label + current numeric value + max-value caption. Wire each slider's oninput to update the corresponding --axis custom property on the specimen via JavaScript. Wght: 300-1000; Slnt: -15 to 0; CASL: 0-1 step 0.01; MONO: 0-1 step 0.01. Add a "Reset all axes" button that restores defaults. Use the appropriate custom property names so the headline visibly morphs as the user drags each slider.