A
A
shop

Move sliders 😍

[ ≠ ] Button: activate to link sliders to selected Font Master.

Resize preview by just clicking into it and then dragg.

[ ⬤ ] Button: Toggle Show Interpolation in current glyph.

Make a new instance from the current settings with ease.

Works with »bracket layers« (glyph swapping) as well 😎.

Variable Font Preview
Variable Font Preview
For: self
Date: 2018

A GlyphsApp plugin

Variable Fonts are the next big thing in (web) typography. So next and so big, that their potential isn’t even fully discovered by designers. What is clear already is that they bring incredible new opportunities do design and web experiences. Along with those new chances come challenges for the type designers who create v-Fonts:

Juggling with crazy, unprecedented master setups and keeping all possible outcomes with variable axes in sight was getting a mind-boggling and sheer unsolvable task. Until now.


Features:

  • Get an immediate preview of how your v-Font will look like with any axes settings in any combination.
  • You can see the live result while adjusting your drawings.
  • Easily spot interpolation issues that can be hard to find otherwise.
  • It can deal with »bracket trick« layers (glyph swapping).
  • Works with ordinary Multiple Master fonts as well.
  • Huge (10k+ glyphs) fonts are no problem at all. Yay to non-Latin.


💡 Version 1.0.1
⚠️ Does not work on Mac OS El Capitan (10.11.6) nor on Yosemite (10.10.5)
⚠️ Only tested on Mac OS High Sierra (macOS 10.12+)


How To:

  • Activate via View > Show Variable Font Preview
  • Move the sliders. Easy
  • [ ≠ ] Button: Link sliders to selected Font Master.
  • [ ⬤ ] Button: Toggle Show Interpolation in current glyph.
  • [ ⋰ ] Button: Toggle Show Nodes in current glyph.
  • [ ⟟ ] Button: Toggle Show Delta Directions in current glyph.
  • [ ➠ ] Button: Add a new Instance with the current slider settings to the font.
  • Resize the preview by click and drag it vertically or resize the GlyphsApp’s preview.
  • To toggle the color black/white, just use the button from GlyphsApp.


Changelog:

1.0.2

  • Add optional display of nodes. Default: On.
  • Add optional display of lines along which the nodes go (delta directions). Default: Off
  • Fix not responding or laggy color changes.
  • Fix blurry controlls. They should be crisp now.
  • Fix non-working drag Preview to resize. (Could be broken now for older Glyphs builds than around 1184).
  • Changed views architecture for Glyphs build up from 1184.
  • Performance is smooth again in Glyphs build up from around 1184 (Mac OS Mojave).
  • 1.0.1

  • Runs smooth with any amount of open fonts now.
  • Sliders update immediately now when you change your values in font info.
  • Slider No.6 does do its job now.
  • Does not work on Mac OS El Capitan (10.11.6) nor on Yosemite (10.10.5). Only tested on Mac OS High Sierra (macOS 10.12+)


Current baby bugs:

Those are not disturbing the experiences and will be solved in future updates

  • Due to the GlyphsApp architecture, you are limited to 6 axes for now.
  • Only LTR and without kerning for now. RTL will follow.
  • It runs smoothest when you have only one font open.
  • When switching from one font to another, the sliders keep their previous values until you touch and reset them.

Get it here:

Related projects: