Circling the Square: Designing with “Squircles” Instead of Rounded Rectangles

To a casual observer, the difference between a squircle and a rounded square can appear negligible and sound semantic. But Mark Stanton, a product and industrial designer, is attuned to the squircular shape’s potential. He says “once you know how to spot it on products, you’re likely to start seeing it (or more likely the lack of it) all around you.”

Non-Apple versus Apple hardware, image via Mark Stanton

A squircle is a mathematical intermediate between a square and a circle (and a portmanteau of the words ‘square’ and ‘circle’). One “secret” of Apple’s physical products, Stanton explains, “is that they avoid tangency (where a radius meets a line at a single point), and craft their surfaces with what’s called curvature continuity.” In side-by-side hardware shots, it is easy to see how the dynamic approach informs shapes and eliminates sharp transitions between flats and curves.

Difference between a rounded rectangle and squircle, image via Mark Stanton

The distinction is reflected in Apple’s software as well, where iOS icons have gone from being rounded rectangles (or: roundrects) to squircles. It doesn’t really make much of an on-screen difference, but it does bring hardware and software designs into alignment. In turn, this has implications for anyone designing icons for Apple devices and interested in implementing precise details, like uniform borders.

So why aren’t squircles everywhere? For one thing: a squircle involves complex curves while a rounded square is easy to define, draw and model — flat edges for the sides, simple curves for the corners.

Tangency versus curvature continuity, image via Mark Stanton

“Companies used to have more excuses,” recalls Stanton. “It used to be that engineering CAD tools weren’t as concerned about this sort of thing. Or engineers might not have been expert in that module of their CAD tools. Or surface design tools and engineering tools didn’t play well together. Or its importance to the bottom line wasn’t recognized.”

A not-quite-squircular plate design

These days, squircles are easier to make and can be found in more and more graphics and objects. The shape also has some advantages for physical products beyond handheld devices. A squircular plate, for instance, can hold more food than a circular one of the same horizontal dimensions, but eliminates the sharp edges of an otherwise optimal square. Still, buyer beware: most products boasting the shape seem to be trading more on the word “squircle” than its actual geometry — you may have to settle for a stack of deformed roundrects instead.

Comments (8)

Share

  1. Mike

    This is how road interchanges, and more importantly rail road curves are designed. When going from straight to a curved section, if the curvature changes abruptly, you’ll have a violent jerk to the side. It used to be a trade secret to have tables of the Euler spiral (https://en.wikipedia.org/wiki/Euler_spiral) so that rail surveyors could plan a smooth right-of-way.

  2. Great stuff! As a patent attorney, I often need to figure out the correct name for various shapes (or, if necessary, make one up). One of my recent favorites is the discorectangle (no, I did not make that one up). It’s a rectangle having rounded ends, and is also referred to as a stadium shape.

  3. Aaron Miller

    I had to listen to the end of the podcast three times before my mouth hole would make the sound “squircle”.

  4. simon

    Have you noticed how Adobe InDesign – the rounded corner “squircles” are asymmetrical. if you draw a line at 45 degrees through the curve – then use that line as a reflection point – the 2 halves don’t match up the one that is on the clockwise side of the line has a weird distortion.

    You can check this by overlaying a ‘perfect’ circle over the corner curve and multiply. the curve is WROING

  5. Jason

    Sunuvabitch! This is one of those things I could sense but couldn’t put my finger on. If drawing something on the computer I’d do the ‘ole radius corner but it never looked quite right and I didn’t know why. Cool article!

  6. Fascinating. As a designer, I feel like I should’ve known about this, but I’ve never heard the term “squircle” and would’ve thought they were just “roundrects” with higher radius corners. I have often been annoyed at the awkwardness of the point at which the radius meets the straight lines, though. I now know I don’t have to settle for that, which is very satisfying. But I do have to figure out how to make them.

Leave a Reply

Your email address will not be published. Required fields are marked *

All Categories

Playlist