Animating Variable Fonts

Over the year I would always come across the frustration of never being able to smoothly transition from the different weights of fonts. It never made sense to me why it was just so impossible. (I was really dumb) In 2018, I had understood a bit of the technical limitations of why fonts can’t animate, I heard about Variable fonts. My mind, was BLOWN 🧠💥. Somehow, designers and engineers came together across the world and built a method of solving this was nothing short of amazing.

I went on to experiment and use variable font wherever I could. Though it was never the focus of my work it always managed to come in clutch every time I was working with type.

Here’s some of my past explorations.

In my DES, I embarked on a journey to figure of a workflow to use Variable font for animation. Explore the existing tools that allow for variable fonts and explore their visuals and outputs.

Using Cavalry to explore gradients, cloning and Variable fonts.

Trying to figure out Variable fonts and JavaScript

Use of the Coldtype Python library(It’s so much fun!)

3D Experiments (Coldtype and Blender)

I was examining the animations and trying to figure out why some animations look more fun the others. why some animations are boring while some are way more interesting. It his me that in my perception, when the font axis and only the axis are being animated, the animation appears to be boring and plain. but as soon as I bring in animation of other font properties like tracking or x-height the animation become exponentially funkier! (This is why in 3D animating the extrusion of the glyphs is interesting!)

In the following animations I am animation not just the width and weight but also the pt. size, tracking and individual glyph rotation.

Using Coldtype in blender (Instructional guide)

So there is an addon called ST2 for blender developed by Rob Stenson.

but i have no idea how to use it. So i decided to use the coldtype library and set that up instead (also developed by Rob)

Let me get right to it, it was a pain. This wasn’t even the first time using the library but it was still really difficult to install. Wrapping my head around venv and using coldtype along with b3denv (a tool by Rob to help expose blender’s python api.

This is just my was of documenting my process and maybe help someone out if they ever get stuck where i did.

So in a nutshell cold type works best in a python Virtual environment or venv this is a way to isolate different python versions on a single computer. this help mitigate dependency problems and makes the process much more streamlined.

The way to go about this is

Installing python

• Make sure you have python installed. I am using Python 3.12.8.
• Make sure python is added to system PATH. (Google it, there’s lots of guides) you can check this by typing python --version in the terminal.

Activating venv

• navigate to a folder you want to code in
• open it in terminal (you can also navigate to the folder in the terminal by using cd path/to/folder replace the “path/to/folder” by the actual path to the folder)
• here you can run python -m venv venv this is telling python to make a virtual environment named ‘venv’. This will create a venv directory in the folder.
• now you run the command ./venv/Scripts/Activate.ps1 (This command is for windows)
• for MacOS and Linux I think you need source venv/bin/activate
• you will see that you have ‘venv’ written before you directory in the terminal, usually in green, indicating that you are in the virtual environment.

Installing Coldtype(not b3d version)

• now here you can run the command pip install "coldtype[viewer]"
• to test if installed properly you can run coldtype demo
• to run a file or make a new one use coldtype path/to/file.py

Installing Coldtype(with b3d)

• make sure you have blender installed (It’s so much easier if you have it installed in the default location, you’ll save yourself so much hassle, if not refer to this part of the readme )
• here you can run b3denv python -m venv benv. This will setup a virtual environment named ‘benv’
• Now, to activate the environment run ./venv/Scripts/Activate.ps1
• I had to install cold type again by pip install "coldtype[viewer]"
• make sure the python file includes the headers,

from coldtype.blender import *

from coldtype import *

• now you should be able to test the install by coldtype examples/blender/varfont.py -p b3d
• ‘-p’ is a flag for property I think and ‘b3d’ is to set it up for blender
• alternatively you can use coldtype examples/blender/varfont.py -bw 1 but I have not tested this yet.