Posted 28 October, 2016
Axis-Praxis is a web tool for playing with Variable Fonts. It’s a simple typesetting environment where you can choose fonts, adjust sliders, and press buttons for Named Instances to obtain precise settings on the variations axes built into the fonts. You can also click the axis buttons for an animation along the entire axis. When you begin you will find, pre-installed in the font menu, the four variable fonts built into macOS Sierra. At any point you can play with your own fonts by just dragging & dropping the TTF file onto the page.
Currently Axis-Praxis does not work on Mac OS X 10.11 El Capitan or older, in regular Safari or in other browsers, nor on other operating systems. Sliders will appear for variable fonts, but they do not function.
The simplest way to see a website working with variable fonts is, for now, the WebKit Nightly browser running on macOS Sierra. Please install these if you want to try the tool:
When you’re up and running, try your own variable fonts or these new releases:
Axis-Praxis relies on the font-variation-settings property in the draft CSS4 specification, implemented in WebKit. On the server, it uses TTX to extract the variations information from the font. Once it has this data and has delivered the font back to the browser as a @font-face webfont, the server has no further use for the font so it is deleted immediately. In the browser, the CSS font-variation-settings property of the textboxes is changed using JavaScript when you adjust the sliders or click the named instances.
Axis-Praxis is written in PHP and JavaScript, with help from JQuery.
You may well encounter problems or unexpected behaviour using variable fonts in Axis-Praxis. Lots of new ideas and new code are being used, so it can be difficult to determine where an issue lies: with the font (and the tools used to make it), with WebKit, or with Axis-Praxis. WebKit Nightly, for example, is pre-release software: features are being added and bugs are being fixed every day. It’s possible also that there remain ambiguities in the OpenType specification that need to be resolved.
Here are some places you might like to explore to report bugs and discuss issues:
David Berlow for permission to use Zycon and for pushing GX variations technology since… forever. David Jonathan Ross, Christoph Koeberlin, Adam Twardoch and CJ Dunn for making variable fonts for testing. Type Together for letting me play with Tablet Gothic. Georg Seifert for building experimental GX export into Glyphs. Just van Rossum, Behdad Esfahbod and the rest of the TTX contributors. Apple for keeping the GX Variations ideas and code alive — in particular Myles Maxfield for implementing font-variation-settings in WebKit. Irene Vlachou for the name Axis-Praxis.
This website is made entirely with variable fonts. No fonts were unnaturally stretched or artificially emboldened in its construction, nor in its use.
May you have variable luck!
— Laurence Penney, creator of Axis-Praxis
Your browser appears to be incompatible with variable fonts.
To get started with variable fonts, install the latest version of Google Chrome. On a Mac running macOS 10.13 High Sierra, you can also use Safari.