I had the opportunity to attend the Typographics Conference and Typelab in NYC.

Typographics NYC and Typelab

There were some really awesome speakers all around. People were really approachable (even the giants) and came from a range of backgrounds, including type designers, graphic/web designers, type programmers and everything in between. I spent a lot of time around the Typelab where smaller talks, tutorials and demonstrations were held and learned a lot in a short period of time.

Design Space

For the lab I built an example of four-master interpolation using glyphs from Jean-Baptiste Levée’s Minotaur (With two additional custom glyphs drawn). Recommended by CJ Dunn, it was a natural fit since my code couldn't parse SVG control points.

Math does not come naturally to me, so I had no idea where to start in order to get interpolation working between four masters (was fortunate enough to have the help from a lot of people). Breaking things down though, it's actually fairly straightforward.

Process

For now SVG is an easy way to illustrate these concepts, but ideally we'll eventually have a more native and accessible solution. Nick Sherman sums things up really well on this topic.

Getting Points

First, we need a series of points. In SVG we have two main ways to express a form: basic shapes, and paths which are more complex. The example only handles polygons under basic shapes, and there are libraries like Snap.svg that make accessing and manipulating points on the web easier.

Points in a polygon will look something like this:

points="607,730 830,730 830,693 801,693 765,685 747,659 747,70 765,45 801,37 830,37 830,0 607,0 607,37 636,37 672,45 690,70 690,330 141,330 141,70 159,45 194,37 224,37 224,0 0,0 0,37 29,37 65,45 83,70 83,659 65,685 29,693 0,693 0,730 224,730 224,693 194,693 159,685 141,659 141,369 690,369 690,659 672,685 636,693 607,693 "

This is just a list of coordinate points. In (607,730), the first number (607) stands for the X value and the second number – (730) holds the Y value, both for the first point. (830,730) is the location of the second point, etc.

SVG points can be pulled from a UFO file by dropping them into illustrator from something like Glyphs or Robofont and saving them as SVGs.

This can be done for each master, which should be solving design problems in and of themselves:

points="283,730 482,730… /* SVG Master 1 */
points="607,730 830,730… /* SVG Master 2 */
points="323,730 617,730… /* SVG Master 3 */
points="609,730 944,730… /* SVG Master 4 */

Trying to Serve Two Masters

We need to first be able to compare points between two glyphs in order to interpolate between four glyphs. In order to interpolate between two masters’ points, we need to do some math (Oh no!).

Take the high value and subtract the low value from it. Then multiply that by our percentage and add the low value to get our new interpolated number. The percentage here stands for how much of one thing we want – ‘0’ gets us 100% of the lower value and 0% of the high value. ‘75’ gets us 75% of the way from our lower value and 25% from our higher value and so on. You can't have 100% or 0% of both.

The equation looks something like this, with p being the percentage and (x₃, y₃) being the resulting interpolated coordinates:

((x₁, y₁) - (x₂, y₂)) × p + (x₂, y₂) = (x₃, y₃)

If we do that calculation for every point (assuming our glyphs are point compatible, or have the same number of points), we can construct a new ‘glyph’ from the resulting points which would give us something like this if we inputed 75:

In Javascript that function might look like this:

// Return an interpolated array from two sets of coordinate points
// Parameters: pointArray (coordinate points like [88,42]), 
// amount (how much we want of one verses the other 0 - 100)
function point(pointArray, amount) {
    var interpolation = ((Math.max(pointArray[0], pointArray[1]) - Math.min(pointArray[0], pointArray[1])) * amount + Math.min(pointArray[0], pointArrays[1]);
    return interpolation;
}

Four Masters

Now lets arrange our four masters in a 2x2 grid so that like masters are adjacent to each other:

Because we're working with a square (the example is a responsive rectangle, but it functions as a square) instead of a line now, we can interpolate in two directions – X and Y (in this example the X and Y position of the cursor). First, we interpolate in our Y direction between two sets of masters. This gets us a new pair of masters, each interpolated from two original masters.

From there we interpolate in our X direction between the two resulting masters to get our final interpolation:

Update this whenever the mouse position is changed, and you can make a space to interpolate between four masters.

And that's it! Keep in mind live font interpolation is just one method for enabling type to respond to its environment, and it has limitations. Not everything should be interpolated for the sake of being interpolated. It does however, allow us to set ranges that give us a lot of flexibility. Credit to Erik Van Blokland and Nick Sherman for all their work in this area. You can try the interpolator here and fork the code on github.