Round corners (Glyphs vs. Illustrator)

I created an O using 3 different methods and the paths are all slightly different. See image for the O that I created. Here are the 3 methods. All methods use the exact same pt dimensions and radius values:

  • Glyphs: make a square, round corners using filter, use offset path to create inside counter shape.
  • Glyphs: make a square, round corners using filter, make another smaller square with rounded corners to make inside counter shape.
  • Illustrator: make square, use live corners to round corners

Again, each method uses the exact same radius numbers. Some of the anchor points and curve values are just a little bit different.

To illustrate the difference, here is a screenshot of the overlap of 2 of the O using different methods:

And a screenshot of the values in Glyphs:

(sorry, I can only post one photo because I am new)

It’s not a big difference, but I see this being a problem if I create stuff in Illustrator and paste it into Glyphs, expecting it to be the exact same. Is there a preferred method?

What of the three methods are in the screenshot?
What version do you like better?

Represent a circle (or in this case a quarter circle) with one bezier segment is aways be an approximation. Illustrator seems to make a bit shallower curves. Those tend to look a bit to flat.

The Circle tool will give you curves closer to the once from Illustrator.

The grey one, probably Glyphs, seems to be using Euler Curve as rounding method (or imitating it). It’s a kind of round curves that transition better from straight to curved shapes, removing the optical perception that there’s a corner in the middle.* As a side effect, it slightly bumps out of elliptical curve as the grey part of your image shows. The effect is even stronger if you activate “visual correction” option, although in this case there seems to be something extra in the calculation.

This kind of curve is used in highway junctions and rollercoaster loops to ensure smooth transition to circular motion. If you just put circle as rollercoaster loop, you’ll break your neck as soon as the cart enters it. Euler Curve is also used as standard rounding method in industrial design too: even the corner of iPhone is rounded this way.

So, neither of them are mathematically wrong. They are just using different maths, and Illustrator’s rounding is elliptical.

3 Likes

Great resource! I will also assume that AI just places a semicircle on a rectangle and does no adjustment. I like the idea of smoothing it out a bit. Thank y’all so much for the help!