Generative Type Interpolation

    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);
      }
    }