Harmo­ni­zation

PostScript and TrueType paths have one thing in common: they are outline formats. That means that if you want build any shape with such paths, you describe the edges (the ‘outline’) of the shape with on-curve points (nodes) and off-curve points (handles). That has an advantage and a disadvantage.

Outline dilemma

The good thing is that we have an incredibly large degree of freedom. We can pretty much describe any shape with an outline. Yes, there are a few edge cases that are a bit more difficult to master, but generally, outlines are a fantastically flexible way to get any job done.

The downside is a bit more tricky. No matter which script you look at, the shapes we need most in type design are strokes. Each script has its own history, but each has one or more typical writing tools that influenced its letter shapes: all kinds of pens, brushes, pencils, chalks, needles, you name it. The good thing about these tools is that by a single stroke of your arm, you automatically create all edges of the shape in one go. And, what’s even better, they all fit to each other consistently. Or, as we say, they ‘harmonize’ with each other. Because, well, they stem from the same stroke with the same tool, how could they not harmonize?

The trouble is now that we do not have this luxury of automatic harmonization when we describe the outline. In our outline formats, each part of the edge, each segment, is completely independent from any other part. So it is our tough job as type designers to establish the proper relationship between all the outline segments, the way they would have come out automatically if the shape had been drawn with the stroke of a tool. And establishing these relationships is called ‘harmonization’.

The takeaway is that harmonization is only an issue because we work with outlines.

Three steps of harmonization

Theoretically, there are many ways to get your outlines to be in harmony. Here is one method that continues from what we discussed about good path-drawing practices, and will work for most scenarios.

Establishing harmony across all segments of a shape has three steps, and each step builds upon the previous step:

1. Point placement: opposing on-curves nodes relate to each other, opposing off-curve handles point more or less in the same direction
2. Inside vs. outside curve fitting: inside curve segments have a higher relative handle length than opposing segments on the outside
3. Segment-to-segment harmonization: transition from a curve segment to an adjacent curve or line segment

Let me explain in detail.

Step 1 Point placement

Let’s take a look at a stroke, e.g., the shoulder of a Latin n or h:

Node pairings

The placement of the green and blue on-curve points, a.k.a. ‘nodes’, adheres to the logic of the writing tool you are trying to imitate. You can see that they always come in opposing pairs on either side of an imaginary center stroke. If you connect them, the pairs appear to be more or less perpendicular to the center line.

However, they are not exactly perpendicular: the top pair (extremum points) is almost vertical, but with a slight tilt from bottom left to top right; and the pair between the straight and curvy parts of the shape (transition points) is almost horizontal, but with a slight tilt from bottom left to top right. This deviation is due to the writing tool we are imitating. For the classic Latin broad-nib pen held in the right hand at an angle of 20 to 40 degrees, however abstracted your design may be, you will get these tilts between pairs of extremum points or pairs of transition points. Because we assume continutity of tool usage, it is always the same tilt we can expect: in this case we always get a bottom left to top right tilt, no matter whether it is a vertical or horizontal node pair. For other tools, the tilt may be the other way around.

Of course, type design is not calligraphy. That means that we have a certain degree of freedom, so take this with a grain of salt. Some pairings will be normalized more than others. Take for instance the bottom two nodes on the baseline: since the style of this typeface demands a horizontal ending on the baseline, the two nodes will have to be completely horizontal. On the other hand, you will have pairings with a more severe tilt, perhaps due to an optical correction. And some pairs will even tilt the opposite way in order to make a curve fit. These are little tricks we take advantage of in order to make the appearance of the typeface more consistent in its intended size.

One detail I want you to pay attention to is how I placed the leftmost point pair. Since they will be in the overlap with the vertical stem, you might argue that their exact position will not matter that much. And you’d be right, at first sight. However, placing them roughly perpendicular to the center line will make the following steps easier to manage. Read on.

Handle directions

Now let’s focus on the path segments, the black lines between the nodes. You can see that you have corresponding segments on both sides of the shape: each inside segment has an opposing outside segment of the same type. So, a line segment on one side will typically demand a line segment on the other side, a curve segment will have a corresponding curve segment on the opposite side.

What’s more, the angles will be (roughly) the same. Ornaments and calligraphic effects like tapering left aside, opposing line segments will face into the same direction, i.e., both vertical or both horizontal, or both at roughly the same angle. Again, some deviation will be caused by the logic of the tool or by optical corrections.

This is also true for curve segments, of course, just that in their case, we can focus on the angle of the grey off-curve points (a.k.a. ‘handles’, ‘Bézier control points’, ‘BCPs’). A horizontal or vertical handle will typically have an opposing horizontal or vertical handle as well, assuming we have a classic arrangement with extremum points. The angles of the diagonal handles depend on the logic of the tool, that is why the leftmost handles in our example spread apart a bit.

But still, roughly, you can say, they point in the same direction. You will not see one vertical and the other horizontal, unless you are doing an experimental design with a design principle that would demand such a placement. But that, clearly, goes beyond the scope of this tutorial.

Step 2 Curve fitting

So much for the placement of on-curves and the direction of off-curves, but what about the handle length? The relative handle length is sometimes (imprecisely) referred to as the ‘curvature’ of a curve segment.

100% counts as the maximum length of a handle, because that is where the handles intersect. If you exceed that length, the curve segment will inflect, meaning it will bend into different orientations, causing cusps and false extremums, and usually you do not want that. But don’t worry, 100% is more than enough in real-life type design practice. You never need that much unless you want to do a revival of Eurostile. In the very most designs, average handle lengths stay well below 80%.

On the other end of the spectrum, completely retracted handles (0% length) make no sense, because then you might just as well use a line segment instead. The next neuralgic percentage is 55%, which is the handle length we need for an ellipse or circle. Typically, in type design, we need something longer than that. Even extremely geometric designs start counting at 58%.

So let’s recapitulate:

• Below 55%: curvatures cause a ‘hang-through’, and the curvature peaks move to the edges of the segment. Peaks mean more turning, ‘more steering wheel’, if you allow the comparison.
• 55%: the curvature comb is pretty much the same amplitude everywhere, this is the arrangement that is closest to a circle.
• Above 55%: the curvature peak moves into the middle of the segment. The longer the handles are, the flatter the segment becomes at its edges, and the curvier it will be in its middle.
• 100%: at maximum handle lengths, note that the curve flattens out completely towards the outer ends of the segment.

  

A quick measurement of (normalized) balanced handle lengths in modern multi-script designs shows that almost all handle lengths (on 90° curve segments) end up between approximately 58% and 76%. In other words, values in that range are what you want to aim for. That is why it is a good idea to set these extremes as our values in the Fit Curve palette:

Adjust for your designs as needed, of course. The same values will not fit every design, but from experience, they will fit surprisingly often. I remember how disappointed I was when I first found out that most curvatures in type design are located in such a small range. Sigh. But then again, it also goes to show how much influence the handle length has.

You will ask, but what has this to do with harmonization? Easy. Since, at least in this method, each curve segment will have a corresponding opposing curve segment, we need to establish a relationship between the curvatures of the segment pairs. In other words we need to harmonize the curvatures of opposing curve segments. And here is the deal if you want to match inner and outer curves: the smaller inside curve needs higher relative handle lengths; the corresponding larger outside curve needs smaller relative handle lengths. Let that sink in.

This presupposes that point placement and handle orientation have been chosen as laid out in the previous step. But if you have done that and set your Fit Curve values in a sensible way, you can use the keyboard short cuts for the eight steps of Fit Curve: Ctrl-Opt-1 through 8. There are three scenarios:

• In very thin weights ranging from Hairline to Ultralight, the inside and outside curves are practically the same. So you can get away with using the same Fit Curve value for both segments. So, you could select handles from both segments, and press Ctrl-Opt-5 to set the curvature for both inner and outer curve at the same time.
• In normal weights from Light to Bold, you will have a small discrepancy between inner and outer curves. It depends on your precise Fit Curve settings of course, but in typical ranges (e.g., 58% and 76%), you will find that one step difference will typically suffice. So, select the inner curve, press Ctrl-Opt-5, then select the outer curve and press Ctrl-Opt-4.
• In very bold weights like Extrabold, Black and Extrablack, the discrepancy in curvature between inner and outer curves tends to be bigger, and usually, you will not need the lowest values anymore. You can accommodate for that either by raising the Fit Curve values accordingly, e.g., to 64% and 78%. Or, you make sure you have two or even three steps of difference between inner and outer curves, e.g., Ctrl-Opt-8 on the inside and Ctrl-Opt-6 on the outside.

That’s it with step 2, you have harmonized inside and outside curves with each other.

Step 3 Segment-to-segment transition

So far, I went on about harmonizing opposing items, i.e., points and segments on either side of the imaginary center stroke. However, when type designers use the term ‘harmonization’, they usually mean visual continuity of curvature from one curve segment to the next.

Technically, each curve segment is a world in itself and knows nothing of the adjacent segments. So, it is not unlikely that we end up with a situation like this:

Yuck. See that bump at the top of the n, where the arrows are pointing to? What happened is that, while inner and outer segments relate to each other well, the ones on the left do not connect well to the ones on the right. You can also see that the curvature visualization shows a discrepancy right at the connecting point:

Let’s take another, closer look. And if you look at the shape, I bet you can spot where the bump is. And sure enough, you will see that to one side of the bump, the curves will be too curvy, and on the other side they will be too flat:

If we manage to get rid of that discrepancy, i.e., that difference in curvature, we may be able to iron out that bump in the shape and achieve smooth segment-to-segment transitions. In other words, we are harmonizing the curve segments with each other. Now, you can achieve such a smooth transition in three ways:

1. Move the on-curve: hold down the Option key and move the green node between the two handles towards the ‘flat’ segment. This method is applied by the Green Harmony filter.

   

2. Move the off-curves: select both grey handles and move them towards the ‘curvy’ segment. In essence, the opposite of the on-curve moving described above. The advantage is that you can keep the position of the extremum point if that matters to you. The downside is that the shape is changed quite a lot. This harmonization mechanism is applied by SuperTool’s Edit > Harmonize function and the Grey Harmony plug-in.

   

3. A little bit of both: if you do a bit of both wisely, you can keep the deterioration of the shape to an absolute minimum. This is what Tim Ahrens’ Remix Tools do when you run Filter > RMX Harmonizer. The Remix Tools are not free, but worth every penny.

G0, G1, G2 and G3 continuity

The harmonization I have shown you above is often referred to as ‘G2 continuity’. G2 stands for geometric continuity by means of equating the 2nd derivatives of both curves in their connecting point. Whoa, sounds too techy? The second derivative is the amplitude (or color) of the Speed Punk visualisation. And making them the same on either side of the green point means you are establishing G2 harmonization.

But wait, if there is G2, there are probably other G’s as well, right? Actually, yes. Here is a quick rundown:

• G0 a.k.a. positional or point continuity: the two (curve or line) segments meet in the same position. The zero means there is no derivative, so all that counts is the same point coordinate. Any corner will do. In other words, any blue node between two segments creates G0:

  

• G1 a.k.a. tangency, tangent or angular continuity: the two segments have the same first derivative, i.e., the same tangent in their meeting point. They have the same direction in their transition. Any green node will establish G1 continuity:

  

• G2 a.k.a. curvature or radial continuity: the two segments have the same radius (of an imaginary inscribed circle) in their meeting point. Not only do they point in the same direction, but their curvature is the same. The curvature is the rate of change of direction. You could also say, the same steering wheel position on either side of the green point. Making the Speed Punk combs the same size on either side of the green node establishes G2 continuity:

  

• G3 a.k.a. torsion or acceleration continuity: the third derivative is the same, meaning the change of curvature is continuous across the green node. If the Speed Punk combs develop continuously, you have G3 continuity. Sometimes, this is also referred to as ‘supersmooth’ or ‘extrasmooth’ transition among type designers. But honestly, there are only a few designs where stepping up to G3 continuity made any difference at all. So, I recommend G3 only for the most obsessive-compulsive among you. Best way to achieve it is to get rid of the green point altogether, and perhaps reintroduce it by Shift-clicking on the segment with the Draw tool (shortcut P). If you can rebuild the curve without an on-curve point, it is guaranteed G3:

  

It goes on, of course. Mathematically you can also equate the 4th, the 5th or whatever derivative. But rest assured, the significance of G4 and above for type design is, ahem, limited. What you want between curves will be G2 continuity. And in the very most cases, approximate G2 continuity will suffice just nicely.

Special case Curve-to-line harmonization

Can we have a smooth transition between curve and line segments? You bet. The way you do it is to bring the two on-curve points of the line segment and the two off-curve points of the adjacent curve segment in one line:

You can see that the opposite BCP (the top off-curve in the picture) is maximized. That means it has a length of 100% in Fit Curve terms. If you rearrange a curve to harmonize with the following line segment, you can grasp the opportunity and Opt-move the green on-curve node between the curve and line segments away from the curve, effectively lengthening the adjacent handle and making the transition even flatter and smoother:

Also experiment with that adjacent handle and see how the line develops. If you do your job well, the transition between curve and line is so smooth that you cannot tell anymore where the curve stops and the line starts, even if you zoom in like crazy. Pretty cool.

But don’t get carried away yet and redo all your curve segments now. There are three problems, after all: TrueType conversion, interpolation, and circumstance.

The first drawback is that harmonized curve-to-line transitions pose a problem for converting your PostScript outlines into TrueType curves. The result may be acceptable in most cases, but it is not ideal. We are working on making it better, but suffice to say, whichever solution we will come up with, it will make TT curves more complex. And that implies a larger file size, which may not be what you want for webfonts.

Secondly, if you are doing this in a multiple master setup, I am afraid you will have to do this in all masters. Otherwise the interpolation will look funny, especially in animated variable fonts. Note the hanging of the curve in the steps between the two maximized positions:

And lastly but not leastly, it is a pain in your bum to do that work. Yes, sure, the script Paths > Harmonise Curve to Line in the mekkablue scripts will help you. But still, you are left with a lot of fiddling around. And, let’s be honest, the effect is hardly visible in smaller sizes.

So, keep your sanity: consider this only if it makes a difference in the intended font size. Not every curve-to-line transition needs to be 100% smooth. Ask yourself if it is smooth enough, at least for the type size you are designing the font for. If you have a high curvature (a high Fit Curve button), chances are that the curvatures towards the edges of the curve segment are pretty flat anyway, and maximizing the handle structure will not make much of a visible difference anymore.

Thus, maximizing makes sense if you make a (display) typeface for big sizes. And even then only in those cases where the bumps are visible, and preferably in CFF-based fonts only.

Useful scripts and plug-ins

Some of these were mentioned above already because they have become essential in the workflows of many designers. My apologies for being repetitive.

• Harmonizer in the Remix Tools by Tim Ahrens. Of all harmonization tools, this one does the best job. It keeps the shape as much as possible but still manages to smoothen the transitions to G2. It is not free, but for a mere 99 bucks, it will have saved you so much time in your first project alone that you will fall on your knees and be eternally thankful for Tim’s ingenuity. Plus, it comes with other useful tools such as the Scaler and the Tuner.

• Speed Punk by Yanone, maintained by the Glyphs team. It does not change your outlines, but just visualizes curvature with a nifty rainbow. All the screenshots in this tutorial were done with it. It’s freely available in Window > Plugin Manager.

• SuperTool by Simon Cozens. It adds a separate Select tool to the toolbar, and when you activate it, you get to have all kinds of visualizations, and a harmonizer that move the handles only, i.e., keeps extremes. Available for free in Window > Plugin Manager.

• Green Harmony and Grey Harmony by Alex Slobzheninov and Rainer Scheichelbauer. will achieve G2 continuity by moving the green nodes (Green Harmony) or the grey handles (Grey Harmony), respectively. Available for free in Window > Plugin Manager.

• Fix Zero Handles by Rainer Scheichelbauer. Will extract completely retracted BCPs, or in other words, it will fix the zero handles a.k.a. half-dead curves. While it does so, it will try to keep as much as possible the shape of the curve segment. Zero handles pose a problem for some renderers. Available for free in Window > Plugin Manager.

• The mekkablue scripts offer a few functions for your outline housekeeping: Paths > Tunnify and Paths > Harmonise Curve to Line. The Tunnify script balances handles, but tries to keep the overall curvature of the segment. And Harmonise Curve to Line does the opposite: it maximizes the curve handle that opposes the following line segment, thus harmonizing the transition from curve to line. The script Interpolation > New Tab with Uneven Handle Distributions will find glyphs in which the distribution of handles changes too much between masters, e.g., balanced in the first master and one of the handles maximized in the second.

Update 2022-08-04: rewrote Step 3, added more screenshots and animated GIFs, added Speed Punk tip.
Update 2022-11-25: fixed typos (thx Josse).
Update 2023-03-22: fixed Speed Punk link (thx Michael Everson).