Morphing between fonts using NodeBox 2

I often get the question how to morph between two different fonts. This post shows a number of morph strategies, including source code.

The theory sounds easy enough: given two glyphs, calculate the difference between the points of glyph 1 and glyph 2, then multiply that difference with a factor and add that to a letter.

glyph1 + ( (glyph2 - glyph1) * factor )

The result: any kind of letter shape between the two extrema. This is what the first version of fatpath does. We have a Fatpath for NodeBox 1, and I recently converted Fatpath to a node as well.

Note that, unlike multiple master fonts, you can go outside of the defined boundaries into new, unexplored type design realms. Cool.

Here's what it looks like:

Given two typefaces, fatpath can interpolate from one typeface to the other by calculating new point values. This approach only works on letters that are very similar, such as a regular and bold typeface from the same type family.

In theory, theory and practice are the same, but in practice, they are not. And so morphing between two arbitrary fonts is a hard problem. For one, the number of points of the same letter in two fonts are rarely the same, even within the same font family!

I tried solving this problem by inserting a "resample" node. Resample generates a new set of points on an existing shape. Since the problem is that the number of points is different, generating the same number of points will solve the problem, right? Here's the result:

By resampling points on the glyphs, any letter can be combined with any letter. Note that the letter shapes "leak", with surprising results.

A bit weird, but great for metal groups:

And here's what it looks like on two completely different typefaces:

The starting points of each letter will be at an arbitrary position, making weird morphs between two letters. Furthermore, what happens when one font has serifs and the other doesn't?

As I said, this is a hard problem, but we can solve it somewhat, with very good results, by using a sort node to "shift" the initial point so they overlap. Finding the initial point is tricky, so I constructed an "analyzer" node that shows where the point starts. In the next video, you can see a normal interpolation (which looks horribly). Then I align the points and do the morph again.

Aligning the glyphs creates much better results.

This setup consists of two resampled shapes, and two sort nodes. The first sort node shifts the points, the second one reverses the order of the points. This is needed if the points travel in a different direction.

This solution has some drawbacks: it only works on a letter-by-letter basis. More importantly, it only works on letters with one contour. Multiple contours are even more complex since each contour can have a different starting points, and even the order of the contours can be different.

Here are some morphs produced by fatpath:

Some random glyph morphs.

You can find all the different scripts here:

fatpath.zip (6 KB)

Let me know if you come up with some cool results!