Drawing Good Curves
Drawing good curves
Geometric perfection is a great starting point, but it often needs optical corrections.
In this case we’ll be looking at the shortcomings of shitty geometric curves and how to fix them.
The problem
Geometric rounding is easy, but it creates subtle nubs where the straight sides transition into curves. Sloppy.
Default rounding is when you slap some circles onto the corners of a rectangle. Sure, it’s rounded, but there’s no easing into the curve—it changes too fast and our eyes can tell. It’s the difference between linear and eased transitions.
Here’s what an improved
version looks like:
Geometric “Perfection”
Workhorse DIN
(Optically Optimized)
What’s going on
This graph shows the rate the angle is changing, like 90°, 89°, 88°, etc.
On the right example you can see that the angle changes more slowly at first, accelerates, then slows down again. It has been eased, as opposed to the jerky example on the left that has no transition.
When you’re riding in the car and you floor it or slam on the brakes, you don’t feel the change in speed (acceleration), you feel the change in acceleration, which is aptly named “jerk.” Curve smoothing is that same principle applied visually—you notice that jerky transition from a straight line to curve.
Here are a few practical examples:
Geometric “Perfection”
Workhorse DIN
(Optically Optimized)
Geometric “Perfection”
Workhorse DIN
(Optically Optimized)
Geometric “Perfection”
Workhorse DIN
(Optically Optimized)
Geometric “Perfection”
Workhorse DIN
(Optically Optimized)
Geometric “Perfection”
Workhorse DIN
(Optically Optimized)
Geometric “Perfection”
Optically Optimized
(Not to be confused w/ Apple’s “squircle”)
Geometric “Perfection”
Optically Optimized
(Not to be confused w/ Apple’s “squircle”)
Geometric “Perfection”
Optically Optimized
(Not to be confused w/ Apple’s “squircle”)
Geometric “Perfection”
Optically Optimized
(Not to be confused w/ Apple’s “squircle”)
Geometric “Perfection”
Optically Optimized
(Not to be confused w/ Apple’s “squircle”)
Geometric “Perfection”
Optically Optimized
Geometric “Perfection”
Optically Optimized
Geometric “Perfection”
Optically Optimized
Geometric “Perfection”
Optically Optimized
Geometric “Perfection”
Optically Optimized
The solution
Here are some quick ways to fix your shitty curves.
If you have more complex shapes that need perfecting, I’ve found Glyphs to be helpful. There are two free plugins I find indispensable: Green Harmony and SpeedPunk. If that scares you, I’m available to help perfect your logo designs.
Illustrator — Quick & Dirty
Pull the handles a bit further out. It does a pretty good job of helping the curves feel less jittery.
Figma — Corner smoothing
Use the built-in tool in Figma to smooth out the rounded corners.
Parting thoughts
If it looks off, fix it.
I’ve done this a lot: “That looks off.” You check it out, all the measurements are right. “Well, I guess I’d better leave it.” Dumb.
It doesn’t matter whether the measurements are “correct,” if it looks off, it needs fixing. We’re in the business of making things look good, not making sure measurements are all correct and equal.
Be practical.
Apply these refinements where it makes sense (like logos) and don’t spend time messing with every rounded pill button on your website. The defaults might be unideal, but they’re the practical solution in lots of cases. The more simple a shape is, the more you’ll notice the imperfections.
Sexy geometry is for showing off.
Designers get a little high when they see something built with geometric shapes and/or a grid, and clients are about the same. We associate it with purpose and craftsmanship, even if it’s completely made up. Take advantage of that—use the outlined geometry to sell or showcase a concept, then quietly use the optically optimized version in applications. No one will know, except me. It’ll be our little secret.