Back to experiments
TypographyAug 2024

Variable Font Playground

Interactive explorer for variable font axes with real-time preview

Tools

React, CSS Custom Properties, Google Fonts API

Type

Typography

Variable Font Playground

Concept

An exploration tool for understanding and previewing variable font capabilities across weight, width, slant, and custom axes.

Process

Built with React and CSS custom properties for real-time axis updates. Includes popular variable fonts (Inter, Recursive, Source Sans) and supports loading custom fonts via file upload.

Gallery

Variable Font Playground - Image 1
Variable Font Playground - Image 2

Learnings

  • Custom axes vary wildly between font families in naming and range
  • Performance impact is minimal with modern browsers
  • Animation between axis values creates interesting kinetic type effects

Previous

Bento Grid Layout Builder

Next

Generative Noise Textures