New to Typophile? Accounts are free, and easy to set up.

Hi type drawing folks,

until I manage to finish my new online shop I’ll sell you my visual outline quality checker plugin for *Glyphs* and *RoboFont* by email, after you’ve wired $30 or 20€ to *post at yanone dot de* on PayPal.

You’ll receive the plugin for both type editor applications as well as voucher codes for my future online shop so you can register later and receive updates. At this point there are none, though.

Here’s a text I’ve recently written about the plugin for a magazine:

——

Speed Punk is a learning tool. It teaches you to better understand the nature of Bézier curves and their curvature, the technical basis of digital type design.

The Bézier curve was developed almost simultaneously by two Frenchmen working in computer aided design (CAD) in the French automobile industry in the early 1960s, Paul de Casteljau working for Citroën and Pierre Bézier working for Renault. De Casteljau is today attributed with the invention, but Citroën decided to keep his research secret until the late ’60s, hence they carry Bézier’s name.

The curves play an important role in many areas of industrial design, namely aqua- and aerodynamics, as well as computer animation (smoothly controlling the velocity of an object over time). And of course computer graphics in general and type design in particular, as they provide a memory efficient means of storing illustrations and can easily be scaled and rasterized on the fly for sharp printing on output devices with varying resolutions.

Without Bézier curves many things we take for granted wouldn’t be possible. Taking off in a roller coaster from the flat into a perfect circle loop would brake your spine, as the curvature would infinitely increase from the straight line to a fixed amount of curve speed in the circle. Or imagine the impossibility of your car’s steering wheel needing to be turned instantly by a fixed angle from the straight road into a curve. Instead, any moving object turns into a curve progressively, starting with no curvature and slowly increasing it over time.

Curvature of cubic Bézier curves (the most commonly used form of the Bézier curves in computer graphics, also part of the PostScript language) is controlled by two off-curve points per curve segment commonly known as “handles” or “vectors”. Pulling one of them will influence the distribution of the curvature of the entire curve segment.

Any design more complex than a quarter circle will require the use of several consecutive curve segments, and this is especially true for letter forms. One of the problems the designer is confronted with is to distribute the curvature equally across two joining curve segments, across their shared on-curve point. If the curvature across this point is not continuous, one might see a smaller or bigger dent in the curve on either side of the on-curve point.

Curvature continuity is called G2 in mathematical terms as opposed to tangential continuity (G1) where two joining curves have a common tangent in the joining point but no continuous curvature, as opposed to positional continuity (G0) where two curves join but have no common tangent, as opposed to no continuity at all (the curves don’t even join). “While it may be obvious that a curve would require G1 continuity to appear smooth, for good aesthetics, such as those aspired to in architecture and sports car design, higher levels of geometric continuity are required. For example, reflections in a car body will not appear smooth unless the body has G2 continuity.” (Wikipedia)

A technical requirement of digital typefaces adds to the type designer’s problem: the necessity of adding on-curve points at the curves’ extremes in both X and Y direction. It is (or was, as some say) necessary to speed up the rasterizer’s glyph arithmetics especially for making glyph bounding box calculation efficient and reliable. But those extremum points will unfortunately in many cases have to be positioned in shape-wise unnatural locations.

Take the construction of the letter “o” mimicking a broad nib pen for instance. Wouldn’t it feel natural to position the on-curve points along the contrast axis for the counter or along a mirrored contrast axis for the outline? Instead we have to position the nodes horizontally and vertically in the most awkward spots. This poses the risk of discontinuous curvature.

Speed Punk illustrates the curvature on top of the outlines with shapes that stand perpendicular on the outline. This is a technique commonly known from CAD software. The “bigger” the illustration is (the further away from the outline), the higher the curvature is at this point. This way it is easy to judge curvature continuity at on-curve points: if the illustrations are of same distance from the on-curve point (they “meet”), the two curves are of continuous curvature. If you see a jump in the curvature illustration, curvature is discontinuous. Simple. Mathematically speaking the curvature is the first derivative of the curve’s direction and it is being calculated using the general cubic Bézier equation.

Another thing to judge other than continuous curvature across on-curve points is the distribution of curvature within curve segments: how loose or tight are the curves themselves? While it is very hard to assess equal curvature on two opposing corners of an “o”, visually comparing the sizes of the curvature illustrations is much easier. As another visual aid, the illustrations’ colors are being interpolated between the highest and lowest measured curvature amounts for each glyph. When the two opposing corners of the “o” have a similar color, their curvature amount is also similar.

All of this design trouble, however, will go away with increasing experience of the type designer. Which is why I call it a learning tool.

Still with Speed Punk we can observe some interesting anomalies of Bézier curves.

Have you ever wondered what the much talked about “inflections” really are? We get taught that a curve’s one handle is not supposed to cross over the other handle’s imaginary continued direction, but why? What this actually means is that the curvature at some point in the curve segment inflects into the negative — the curve becomes an “s” form. However small the amount is — if not intended it should be avoided — another dent is inevitable. In Speed Punk this will show as the curvature illustration crossing over the outline into the other side (in “Outer side of curve” mode) or bounce back from the outline (in “Outside of glyph” mode).

There are exceptions, of course. One letter that is supposed to carry two inflections is — not surprisingly — the “s”.

The other interesting observation is the curvature of a circle. Theoretically, curvature would be identical all around. So Speed Punk’s illustration would form another circle at a distance. It is known that with no amount of Bézier curve segments can a perfect circle be constructed. The lower the amount of segments, the less perfect the result.

A normal circle’s radius constructed of four curve segments will deviate from the exact radius by a maximum of about 0,27 per mill according to my measurements. The curvature starts out at the on-curve point with its minimum, reaching a maximum (highest deviation from exact radius) at about 14 degrees angle, then going back to a medium curvature at 45 degrees, then repeating over in reverse until the end of the segment.

Speed Punk lends its name from the curve speed (another term for curvature) and the Mohawk-like shapes that illustrate the curvature on the letter outlines. And it suggests that it’s cool to draw curvature continuous Bézier curves.

While the top curve may appear to the designer’s eye as continuous at the on-curve point, it is not, indicated by the jump in curvature illustration. Also visible: the general quality of the two top curves differ from the two bottom curves. The top curves show a curvature emphasis in the center of the segment, the bottom curves show emphasis towards the sides.

The curvature is continuous throughout this o’s on-curve points. However, the counter’s top right curve segment shows a significantly higher curvature than the lower left segment, indicating an uneven curvature distribution.

Visual proof of a geometrically unprecise circle constructed from four cubic Bézier segments. The curvature illustration is far from circular and the interpolated colours clearly indicate the highest and lowest measured curvature.

An inflection is where the curvature inflects into the negative — the illustration crosses over the outline. This example segment barely shows a dent. But however small, a dent is inevitable.

13 Nov 2012 — 6:50am

This is awesome! Congrats.

I sent you the payment last Sunday. Did you get it?

13 Nov 2012 — 7:08am

Yes. I just sent you the plugin again to the address you mentioned in the transfer notes. Thank you.

13 Nov 2012 — 7:43am

Thanks, just installed it, and it's already helping me to see new details in my curves.

It's mind-blowing!!!

13 Nov 2012 — 11:31am

Useful and pretty - a rare combination.

FontLab support?

hhp

13 Nov 2012 — 11:41am

Thanks for the detailed explanation. I understand it much better now.

14 Nov 2012 — 11:28am

PC support?

8 Jan 2013 — 12:01am

In my past life as an industrial designer I learned 3D modelling and in that world, mathematically perfect continuity is king. When I took my first type design class I was taught to draw in (gasp!) Illustrator and found the lack of curvature continuity analysis tools frustrating. I later moved on to Fontlab and then RoboFont but missed porcupine analysis from my Rhino3D days.

Needless to say I fell in love with speedpunk when I hear it existed…

Anyways, after that love letter, here are a couple videos explaining continuity and continuity analysis. They're aimed at 3D modellers, but are very understandable and well worth a watch to better grasp what SpeedPunk does and why it makes for nice outlines.

http://cadjunkie.com/1113/continuity-101

http://cadjunkie.com/1117/continuity-102-analysis

8 Jan 2013 — 7:40am

Rodrigo, Thanks for sharing those links!

8 Jan 2013 — 8:59am

Rodrigo, great links. BUT don't forget about Dwiggins... A font, especially a text font, is not a car.

hhp

8 Jan 2013 — 10:38am

It's not that perfect continuity is always the goal, but knowing what's going on with your curves, that they're doing what you mean for them to do, is invaluable.

11 Jan 2013 — 12:14pm

Agree with Hrant. A possible pitfall of this kind of tool (with full respect and appreciation to Yanone's effort) is that it may give the user the wrong assumption that all curves have to be smooth. If you disagree with me, just run Speed Punk on renowned typefaces, especially Adobe ones like Adobe Garamond, Minion, Jenson, Arno, and their italics. Would you say they are bad typefaces because Speed Punk gives you bad results?

13 Jan 2013 — 8:40am

I have only learned recently (two years after the first working prototype of Speed Punk) how to properly read the illustrations and make good use of them. Now being even more fascinated by the tool.

Today I let myself be carried to the extreme to say that curvature continuity across oncurve points is a necessity! It’s what happens left and right of them and with the curve as a whole (across multiple segments) that makes a difference. What Mark said.

Tension and curvature continuity don’t contradict each other.

The cross reference to Garamond, Minion, Jenson, Arno is somewhat pointless because the originals to these designs were made without the technical constraints of the Beziér curve. It’s because we are required today to place points in often awkward locations like geometrical extremes why a tool like Speed Punk and curvature continuity is boss.

Start paying more attention to the quality of the curvature distribution rather than continuity alone. See first showing above.

13 Jan 2013 — 8:59am

Agreed.

However the references to Calibri (in another recent thread*) and most of all to the M-Formula are not at all pointless. In fact the latter has been a very strong positive force in type design of late (although only among a few**) especially in countering the succubus of chirographic type; the more you move towards the Text end of the Display-Text axis, the more

discontinuity(first, second or any derivative) is useful.* http://typophile.com/node/97783?page=2

** http://www.typophile.com/node/96123

All this does not make Speed Punk anti–type-design, and certainly not useless. It's just a tool - it can be used well or poorly. I for one am glad you made it. Just figure out how to make it work on the world's most popular font editor. ;-)

hhp

13 Jan 2013 — 10:22am

I knew people would soon start vivisecting other people’s typefaces :)

For laughs I actually wanted to pull this on the initial introduction on Robothon and ask the audience to open fonts I have on my computer.

But I forgot it just like showing a few of the other things from the above text due to stage excitement.

13 Jan 2013 — 12:11pm

Calibri was built as a quadratic multiple master, and one of the reasons for that was that the rounded corners were too tight to cleanly convert back and forth between cubic and quadratic outlines. So the illustration in the other thread of Speed Punk applied to a converted-to-cubic Calibri outline seems to me not very useful.

As Yanone says, Speed Punk -- like Tim Ahren's excellent RMX Harmoniser tool -- is concerned with what happens on either side of a cubic node on a continuous curve. This seems to me to have nothing to do with the so-called M-Formula, Hrant, which is about breaking curves with angles and the resulting relationship of interior and outer shapes.

13 Jan 2013 — 3:03pm

To me the M-Formula isn't just about abrupt breaks - that's merely its most literal implementation; in fact I would say that's its most primitive implementation, and its attenuation is where the gold lies.

hhp

13 Jan 2013 — 7:19pm

Which still implies nothing about curve equation maths.

13 Jan 2013 — 7:57pm

I could be wrong since I haven't actually used Speed Punk to do a vivisection, dissection or autopsy, but my [strong] hunch is that the more a given outline takes the M-Formula to heart, the more Speed Punk will produce an uneven hairdo.

hhp

13 Jan 2013 — 8:50pm

I think you are still not understanding what Speed Punk does. In order for your statement to be true, it would be

necessaryfor curves through nodes in an M-Formula design to be mathematically imbalanced, but that is not the case. What Speed Punk indicates about curves is mostly independent of design, i.e. it indicates how a curve continuing through a node is mathematically defined, not what the shape of the curve is or how it relates to other curves. It might be helpful to look again at the illustrations in Yanone's original post, and to realise that in every case the curves illustrated could be otherwise defined mathematically while retaining their shapes.13 Jan 2013 — 9:07pm

No, I do understand (note that I hold a minor in Numerical Analysis :-). But/so what I wrote is only a hunch. Basically, thinking practically, a good sort of question to ask is: assuming -if only for the sake of argument- that Speed Punk does raise red flags in Turnip's outlines, would David Jonathan Ross (who is an open-minded and modest designer, not a dogmatic or self-important one - at least from what I can tell) agree with the changes he would have to make to lower those flags? Possibly.

hhp

13 Jan 2013 — 11:19pm

That's a different sort of question. As Tim Ahren's says regarding RMX Harmoniser -- which automates adjustment of curve smoothness -- don't go to the hospital if you're not sick. If the curves are the way you want them to be, and you are satisfied with the results, changing them to achieve mathematically better balanced smoothness is unnecessary. But that is a different thing from positing a strong hunch that a particular kind of design requires imbalanced curve smoothness. The real question to ask regarding a typeface like Turnip -- or any typeface, really -- and tools like Speed Punk or RMX Harmoniser is whether balancing the smoothness of curves mathematically significantly affects the shapes at all? My experience with RMX Harmoniser is that pretty much any curve involving one or more intermediate nodes can be expressed in a multitude of ways, most imbalanced in one way or another and one that is balanced.

14 Jan 2013 — 7:08am

If it doesn't then why use Speed Punk at all?

hhp

14 Jan 2013 — 10:17am

1. A curve may have an overall pleasing shape, but may carry even a slight sense of displacement at an intermediate node point. This will become more evident at large sizes, but since we're dealing with scaleable outline technologies, why not optimise the smoothness

if smoothness is the effect you are seeking.2. I use RMX Harmoniser in part as a tool to check my work, to determine whether the curves I have created are as smooth as I want them to be (again, presuming that smoothness is what I'm after), and I can imagine Speed Punk being similarly used. Both can be useful training aids, helping you understand how smooth curves are best expressed as beziers, and hence improving your use of the tools to achieve your design goals.

3. I'm a smooth kinda guy, and I like my curves curvaceous.

14 Jan 2013 — 11:31am

Adobe Garamond is not a metal typeface. It doesn't matter if it's Adobe or not (or whether it is a revival of a metal type or not), it can be any good typeface of which Speed Punk gives a bad result.

22 Jan 2013 — 1:56pm

Something just hit me: Speed Punk might be a great tool for deciding where to make stencil cuts.

hhp