Variable Fonts Playground

A variable font packs all its weights, widths, and styles into a single file. That's the performance story. The design story is what happens when you start moving through that space.

Variable fonts operate through axes: continuous numerical ranges that control everything from weight to optical size. A heading can stretch wider on desktop and compress on mobile without swapping files or triggering layout shifts. Custom axes go further: Wonk, Casual, Softness are controls that had no equivalent in CSS before variable fonts existed.

The playground puts those axes under your hands. Move the sliders and watch the letterforms respond in real time. Apply animated presets to see how a single typeface shifts personality across its design space. Copy the CSS with font-variation-settings ready to paste.

Roboto Flex, Recursive, Fraunces, and Bricolage Grotesque were each chosen because they do something a static font cannot.