3Copy the CSS
Snapshots S
What are variable fonts?
A live playground for testing variable fonts
A variable font packs a whole type family (every weight, width and optical size) into one file. Instead of loading separate Bold or Condensed files, you move along each axis and the letterforms interpolate smoothly through the CSS font-variation-settings property. That property is animatable, so type can respond to people in real time.
This font playground loads 62 real variable fonts from Google Fonts, from workhorses like Inter and Roboto Flex to wild ones like Nabla, Honk and Kablammo. Pick one, then choose how its axes move:
Slider
Precise control. Double-click a slider to reset it.
Scroll
Bind one axis to your scroll wheel or a vertical drag.
Pointer
Map X and Y to two axes, or let letters swell as the cursor gets close.
Animate
Loop any axes with a wave that ripples across the letters.
Sound
Your microphone drives the type. Each letter can listen to its own frequency band.
Switch between display, waterfall, paragraph and glyph views, save snapshots, and export the CSS, a Google Fonts embed, or @keyframes that reproduce the animation in your own project.