Variable Fonts Demo

I’ve put together a little interactive demo on variable fonts where the font’s weight and optical size change when you move your mouse around. It’s easier to see how the letter shapes adapt to the changes. Notice how the letters “open up” when the optical size decreases and how the stroke thickness varies unevenly when the weight changes.

One interesting thing I noticed while playing with it is how cool it feels when your actions and their results are coupled. When you work with a computer, your thoughts and actions are translated into a series of discrete steps. You type a letter, create a rectangle, or open a tab. This is not how we communicate with objects in real life. But this example feels closer to how you drive a car or play a musical instrument.