Visualize dimensions of a variable font in the browser
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
.gitignore
LICENSE
Main.elm
README.md
Structure.elm
elm.json
gh-pages.sh
index.html
screenshot.png

README.md

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.

Screenshot

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