I’ve been looking at the dynamic typeface Laika recently, wondering if I could reappropriate its ideas for my own typeface — Fraction Mono. Interpolation can be done fairly easily in Glyphs, but I’d like to do it outside of font software, ideally realtime. Perhaps it could become a responsive display typeface, stretching and compressing depending on the device.

First, I made sure the different heights were compatible by interpolating them in Glyphs.

Preparing the files in Glyphs

Then using opentype.js I went through each point in the path, then interpolating it with the corresponding x/y values on the other heights.

Drag the slider to modulate the amount of interpolation.

for(var i = 0; i < aPath.length; i++) {
  var cmd = newPath.commands[i];

  // Checking if the anchor point is a bezier or not
  if (cmd.type !== 'Z') {
    // Linear interpolation between the two depending
    // on the slider value
    cmd.x = lerp(aPath[i].x, bPath[i].x, amt);
    cmd.y = lerp(aPath[i].y, bPath[i].y, amt);
  }
  if (cmd.type === 'Q' || cmd.type === 'C') {
    cmd.x1 = lerp(aPath[i].x1, bPath[i].x1, amt);
    cmd.y1 = lerp(aPath[i].y1, bPath[i].y1, amt);
  }
  if (cmd.type === 'C') {
    cmd.x2 = lerp(aPath[i].x2, bPath[i].x2, amt);
    cmd.y2 = lerp(aPath[i].y2, bPath[i].y2, amt);
  }
}