You're viewing version 1.0Try Variable Font Playground 2.0 →

Type specimen · live axis control

Variable Font
Playground

One font file, every variation.
Scroll and the type morphs as you move, or switch to a slider for precise control.
Slider mode
400
wght · weight

MadebyPat

Scroll inside the canvas to morph↓

Generated CSS


          

        

      


      

        
What are variable fonts?

        
A live playground for testing variable fonts

        
A variable font packs an entire type family (every weight, width and optical size) into a single file. Instead of loading separate Bold or Condensed files, you slide along each axis and the letterforms interpolate smoothly through the CSS font-variation-settings property.

        
This font playground loads 52 real variable fonts from Google Fonts so you can test them live. Drag a slider for any axis, or switch to scroll mode and bind an axis to your scroll position so the type morphs as you move. Edit the specimen text, set the size, then copy the generated CSS straight into your project.

        
Supported axes include weight (wght), width (wdth), optical size (opsz), slant (slnt), grade (GRAD) and other custom axes, depending on the typeface.

      

    


    
    
  


  

    Loads live variable fonts from Google Fonts · axes per MDN's font-variation-settings · madebypat.com · appsbypat.com