Font Dimensions

A tool to visualize dimensions of a variable font. Click for online demo.

Tested to work for variable fonts with less than 8 axes in the latest Chrome and Safari browsers.

Usage:

1. Load a variable font file in the top left corner
2. Use the Dimensions slider to control how many dimensions to show
3. Values sliders change the values for axes
4. Scales sliders change the lengths of the axes
5. Drag the screen to rotate the visualization in 3d
6. Click to edit the sample text, the default is “Afg”

Resources:

1. Elm programming language
2. opentype.js to parse font files
3. opensolid is used for geometry
4. Voto Serif GX font is included for the demo purpose

Aknowledgements

1. Lucas de Groot for the original idea
2. Ian Mackenzie for opensolid/geometry library

Running the demo locally

1. Compile with elm make Main.elm --output assets/elm.js
2. Start a server, e.g. python -m SimpleHTTPServer
3. Open in the browser.

License

Mozilla Public License 2.0