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.
- Load a variable font file in the top left corner
- Use the
Dimensionsslider to control how many dimensions to show
Valuessliders change the values for axes
Scalessliders change the lengths of the axes
- Drag the screen to rotate the visualization in 3d
- Click to edit the sample text, the default is “Afg”
- Elm programming language
- opentype.js to parse font files
- opensolid is used for geometry
- Voto Serif GX font is included for the demo purpose
- Lucas de Groot for the original idea
- Ian Mackenzie for opensolid/geometry library
Running the demo locally
- Compile with
elm make Main.elm --output assets/elm.js
- Start a server, e.g.
python -m SimpleHTTPServer
- Open in the browser.