Interpolation and Masters

I always thought that font designers had to design each glyph for every style that they wanted. For example, draw the “a”, then the italic “a”, then the bold, semibold, etc. “a”.

Turns out, no. Font design software + modern workflows mostly take care of this using a process called “interpolation”.

Animation Analogy

imagine you’re animating a circle turning into a square.

  • you draw keyframe 1: perfect circle.
  • you draw keyframe 2: perfect square.

The computer can tween the in-betweens — frame 5 is “slightly squarish circle,” frame 15 is “almost square.”

You didn’t hand-draw all 24 frames; you drew the masters, and the software interpolated the rest.

Fonts basically work the same

  • masters = keyframes (Thin, Black, Condensed, Expanded, etc.)
  • glyph outlines in each master must be compatible (same node count/order/start points).

The “font engine” interpolates between them to generate “instances” (Medium, Semibold, ExtraBold, etc.), so the designer really only hand-draws maybe 2 or 3 weights, and lets the math fill in 5 or 10 more.

“Font engine”??

“Font engine” here can basically be a font editor OR a font rendering stack on an OS, web browser, etc.

The interpolation can happen in one of two places:

  1. Font Editor
  • The font editor software can emit static fonts with the interpolation already taken care of
  • each one has fully materialized outlines (already interpolated by the editor).
  • no runtime math needed — they’re just ordinary fonts.
  1. Render time - variable font (OpenType 1.8+).
  • instead of emitting every weight/width, the editor saves the masters + delta data into one .ttf/.otf
  • the file stores:
    • base outlines (usually one master)
    • “variation tables” (gvar, fvar, avar, etc.) with deltas that describe how to morph outlines along axes.
    • the font rendering engine (CoreText, DirectWrite, HarfBuzz, etc.) does the interpolation at runtime when you request, say, Weight=532 on a 100–90
end of storey Last modified: