Axis of Variation

“ ... in any context, large or small, designing the medium is managing the potentials and relationships between objects, the activity or disposition immanent in their organization.” – Keller Eastering

In this project, you will create a variable font, considering the axes of variation as a medium. You are not only designing the visual instances of letterforms — you are designing the relationship of the typographer to the typeface. What power and possibilities are you granting with your variable font? If you can choose any kind of axes for variation, what is the significance of that choice?

Note — this typeface does not necessarily need to have a modular construction, composed of components, but I recommend this method, especially if you are new to glyphs.

(In our following project, you will then create a type specimen as a website that showcases your concept behind your variable font, using HTML, CSS, and JavaScript.)

Project Details

Consider the design of transforming letterforms to be a tool for expressing a point of view, a medium for communication in and of itself.

Technical Learnings

  • What is the basic process of designing letters?
  • In what ways can drawing type help us understand the way vector curves work?
  • How might the font take advantage of its mode of construction?
  • How do we refine the craft of our drawings?

Design Questions

  • How can we establish a system of rules, and where they can be broken?
  • How do the shapes and spaces within and around letters form a pattern, a texture?
  • How do you we articulate the characteristics of letterforms?
  • How can your typeface demonstrate a commentary; a point of view?
  • How can the way these shapes vary become a means for embedding concepts?
  • How does a specific use of for the web affect the design of our letters?

Project Schedule

Week 1: Prepare design concept and initial sketches

  • Define your typographic concept(s)
  • In Glyphs, roughly sketch out 2 different design directions with a few letters
  • Begin with the control characters: H, O, D, and/or n, o, p. (These characters provide the “DNA” of a typeface: its straight shapes, its curved shapes, and the combination of the two.) Continue with other related letters. (You should have enough letters to spell out several words.)
  • Articulate the axis for variation and your intended design space. (You might draw a few of the “varied” version of the letters in glyphs. Begin with a copy of the letter.)
  • Familiarize yourself with the Glyphs App interface.

Week 2: Drawing and Design

  • Flesh out your alphabet for one master, refining your shapes.
  • Begin drafting your second master and test out your interpolation.
  • Pay careful attention to keep your outlines compatible.

Week 3: Drawing Refinement, Production

  • Refine your drawing and complete the character sets for both of your masters
  • Test out the interpolation; is the rate of change consistent across your letters?
  • Export your font and begin testing your typeface on your class website
  • Begin thinking about the implementation of your typeface — how can it best be activated in the browser?

Requirements

  • You must have a complete alphabet of uppercase and/or lowercase, with punctuation (ABCDEFGHIJKLMNOPQRSTUVWXYZ “”.!?,- / abcdefghijklmnopqrstuvwxyz “”.!?,-)
  • You must have 2 interpolating masters

Resources

Previous Student Work

Variable Fonts

Technical Resources

Glyphs Links

Glyphs Shortcuts

Below are some shortcuts frequently used in the Glyphs App.

Description Function
Send to background ⌘A (select all) + ⌘J
Toggle between background and foregraound ⌘B
Move by 10 units Shift + arrow keys
Adjust sidebearings, left side (by ten units) ⌃(ctrl) + arrow keys ( + shift )
Adjust sidebearings, right side (by ten units) ⌘(command) + arrow keys ( + shift )
Add Extremes Points* ⌥ + ⌘ + E
Kern (by ten units) ⌥ + ⌘ + arrow keys ( + shift )
Toggle measurement line ⌃ + ⌥ + ⌘ + drag
  • *Extreme points are on-curve nodes that lie at 90°. They help structure the curves cleanly.
  • Generally speaking, keeping the shift pressed adjusts arrow-key increments to 10 units; shift + command adjusts them to 100 units.
  • The selected letter is the glyph on the right side of the cursor. You can adjust both the left and right side bearings of the glyph in this way, using those different keyboard shortcuts above.

Glyphs Plugins

You can install plugins through the Plugin Manager within the Glyphs app. Before doing so, you must install the Modules (FontTools Python RoboFab Vanilla). Then, double-check your Glyphs App Python version after restarting. Below are some plugins you might find helpful:

  • Word-o-Mat
  • Show Angled Handles
  • Show Tops and Bottoms
  • Master Compatibility
  • Variable Font Preview 3 (Trial Version lasts 30days)
  • Backdrop

Testing