Variable Futures 



Screenshot of Variable Futures homepage

My role

  • Design
  • Development


What began as a bit of messing around with variable fonts in CSS turned into a full website complete with interactive tools, a publication and a flipbook. And a spot of 3D printing for good measure.

Put simply, variable fonts do away with the notion of fixed ‘bold’, ‘medium’ or ‘regular’ weights in a typeface, replacing them with a continuous spectrum of weight. It’s not just weight though, type designers can customise any number of stylistic features, like italic skew, stroke contrast, character width or even serif prominence. This project won two Gold Pins at the New Zealand Best Design Awards.

The best way to learn about variable fonts is to try them out, so we built a couple tools to play with various axes and expose the underlying CSS.

A fun way to visualise axes

Variable font animation experiment keyframes

To supplement the website, we experimented with physical artifacts; a publication, flipbook and 3D-printed type.

The end,