Variable Font Preview 3

Involved Masters

With this feature, understanding complex font master axes setups becomes effortless as it showcases the strengths of each participating master in your current interpolation.

Explore the influence of each master with the indicated percentage (%):

  • Masters are color-coded for easy differentiation.
  • The interpolation color represents the extent to which each master is involved.
  • A bar graph visually represents the percentage of influence from each master in percent.
  • The radar graph offers an alternative visual format for quick comprehension.

Color Fonts

Colorful variations? No Problem

Your color fonts will be rendered in the preview like any other font. The interpolated preview will be shown in all its colors.

In this example, I enabled the "Hide Current Layer" to bring you a clear view on the interpolation.

‘Monstertruck’ font by Typearture

Due to continuous changes in GlyphsApp, depending on the Glyphs version the preview could appear a little buggy. Also COLRv1 is not yet supported by Glyphs, and Variable Font Preview is pending better implementation for that.

Center Preview Glyph

Alignment of Interpolation

It can be handy to have the interpolation preview centered behind your letter in any master.

  • Enable this feature to center the preview within the glyph bounds.
  • Disable it to left align the preview.

Both cases can be useful depending on your design.

Numerical Values

Moving sliders only? Not everone’s cup of tea!
You can simply type the values in the number labels instead.

And it doens’t stop there:

  • Use your arrow keys ↓/↑ to increment or decrement in single steps.
  • Hold shift to increment in steps of 10.
  • Hold shift+cmd to increment in steps of 100.

Extrapolation

Using the text fields also empowers you to extrapolate beyond your axes limits.

But beware: Extrapolated values are not possible in variable fonts, so they will be shown in gray to indicate that they’re probably not what you really want.

Jump to Instances

No clicking required, just hover.

Hover over any of your font’s instances in the plugin menu and the sliders will magically jump into position in order to show you exactly the location in the design space. It’s that easy to inspect static instances of your font.

Make Instance

Make an instance from your very current slider setup. Could that be done any quicker? I don’t think so.

Right To Left

Working on Arabic or Hebrew variable fonts? Or any other right-to-left (RTL) writing system? No worries, I got you covered right here. Give it a try.

Shown font: FiraGO Arabic.

Virtual Masters

You want to reduce the amount of masters but still change the appearance of some glyphs? That’s what virtual masters are for.
Variable Font Preview is capable of presenting the result to you.

Show Nodes

Tune into the visual complexity as you wish! Depending on the stage in your workflow you might want to adjust what to see and what to hide.

The nodes of your interpolation and the involved masters are definite toggle candidates.

Oh, and their size can be adjusted in the GlyphsApp preferences.

Glyph Swapping

You want to swap incompatible layers entirely on certain settings? The preview will deal with your bracket layers with ease.

Change Size and Color

It’s as easy as pie to change the preview size and color, since they are attached to the built-in preview settings of Glyphs.

However you can also just grab the upper preview and drag it to resize.

PS: The example font is IBM Plex Thai Looped, which is by the way not even set up as variable font. That works, too! Cool, eh?

Variable Font Preview 3
Variable Font Preview 3

The First-Ever Live Preview of Variable Fonts in any Font Editor

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 became a
mind-boggling and sheer unsolvable task. Until now!

With this GlyphsApp plug-in you can now immediately preview what your variable font will look like with any axis settings,
see the live result while drawing, spot interpolation issues. It works with ordinary Multiple Master fonts just as well.

Version 2.0 is entirely rewritten in native Apple code, which brings not only an incredible performance boost,
but also eases up the maintaining und updating process. That means more comfort for you.

Key Features

  • Live preview of any variable font setting without exporting any font files.
  • Preview the content of your Edit Tab as well as your current glyph.
  • See the masters involved in the current interpolation.
  • Easily spot interpolation issues that can be hard to find otherwise.
  • Glyph swapping (»bracket trick« layers) can be previewed.
  • Works with ordinary Multiple Master fonts as well.
  • Huge (10k+ glyphs) fonts are no problem at all.
  • Show/hide the nodes of the interpolation.
  • Quickly set sliders to your masters or instances.
  • Make an instance from current slider setup.
  • Preview virtual masters.
Install Variable Font Preview 3 in Glyphs

Often Asked

  1. Either click the Install button above, and then:
    1. Allow the browser to open Glyphs.
    2. Accept the install dialoge in the app
    3. Relaunch Glyphs
  2. Or do it manually:
    1. Open Glyphs
    2. Open the Plugin Manager by selecting Window → Plugin Manager.
    3. Search for “Variable Font Preview 3”
    4. Click Install next to the Variable Font Preview 3 plugin preview.
    5. Relaunch Glyphs
      It is now available as a Reporter.

You can always contact me via my contact form below. Another way is to open an issue on GitHub.

Related projects:
Mark Zones Script Deck Show Stems Presenter 3 Presenter