Good article in general but mixed with many fallacies.
1. Size is obviously not height. It's the area of the shape. There are complications though, e.g. negative space often adds weight. Blurring shapes is a terrible idea here.
2. Aligning shape edges is also an optimization problem to equalize overshooting areas.
3. Finding a visual center has nothing to do with the circumcircle in a general case. It's a well-known centroid. But, again, there are lots of complications.
4. A circle is perfectly circular. There are other reasons for the "O" adjustments in typography. It's even mentioned later on with no connection to here.
5. The round corners is another story. In this case G2 fillets are most pleasing. It's hard to make this adjustment by hand, that is why the examples look bad and unnatural. Squircle, Lamé curve, has nothing to do with the iOS icon shape.
Most of these adjustments can be done with mathematical precision. The rest can be approximated well enough with mathematical models. Ideally, design tools should guide these adjustments. There is definitely interest. My most successful plugin for Sketch happened to be the one for optical adjustments http://designplugins.com/optically.
Indeed, all those obvious misconceptions make the title addition "(for True Nerds)" sound quite strange.
Sitting in front of your computer all day doesn't make you a nerd.
Diving into a topic and not stopping until you develop a shockingly deep unterstanding, that does make you a nerd. (Bonus points for surpassing the generally-accepted experts on that field.)
Re 3. the centroid seems wrong in the article (the one on the right is supposedly 'good') https://cdn-images-1.medium.com/max/2000/1*3VebDJ3XSt3g3syHY... . Both look uncomfortably off-center, too far to the left or right. There must be a better way than 'draw a circle around it' (imagine with Portlandia voice.)
Yeah, having spent a bit of time in Photoshop, for that particular problem I think the solution is an average of shape centre-of-mass and bounding rectangle centre.
Regarding optical size of icons... for years I've wished that icons were sized (in the dock, in Finder, etc.) to consistent maximum area on top of maximum height/width, so that applications with square icons wouldn't look bigger than the circular or irregular ones. It would make everyone's dock look so much better.
For example, a 32 x 32 icon has 1,024 pixels. If we declared than any icon can only use 2/3 of the available area, then square icons would be reduced to 26 x 26, circle icons to 29 x 29, and more irregular shapes like a printer or magnifying glass would presumably get the full 32 x 32. It's trivial to sum up and calculate from the amount of transparency, and would leave rows of icons so much more optically balanced.
(More advanced -- to deal with hollows, you can "shrink wrap"/"gift wrap" the icon before calculating area.)
Visual weight is not just about number of non-blank pixels. The author has a few good examples of how strong colours add weight to otherwise identical icons, and so dark icons look better being a bit smaller.
Although I'm not a designer, I'm a bit OCD about design/geometry - and I imagine designers are even more so. Aside from the non-perfect circle, why wouldn't they align the edges (left and right respectively) of the green and red arcs! That is going to annoy me every time I see that logo now.. It really ought to be reported as a bug/issue.
Because the "center" of the G is not the optical center. Same reasons as everything else in the original article. Take a look at the image at the top of this page: https://en.wikipedia.org/wiki/Typeface_anatomy. The crossbar of the E (and R) are higher than vertical middle. And they differ from the x-height.
Despite your affinity for geometry, geometric fonts are the exception, not the rule. And even geometric fonts often have tweaks that make them less "perfect" geometrically but look more correct. https://en.wikipedia.org/wiki/Sans-serif#Geometric
I found some hints - straight from the source, Google's design team - to the reasoning behind the "G" design, and why the alignment of colored arcs turned out that way.
Thank you for the pointers. I see, "perfect" geometry is not necessarily good typography, and that these "imperfections" have reasoning behind them, for legibility, better balance, to give more natural/correct feel.
I can understand the "near-perfect" circle, but wouldn't you agree that the (mis)alignment of the green and red arcs' edges feels wrong? Not about typography/legibility, but about the balance of lines. Interestingly, in the Futura font, which is quite similar to Google's Product Sans, the top line of the G extends a little further, so that its edge would have lined up "perfectly" as I would have preferred. For comparison: https://qph.ec.quoracdn.net/main-qimg-4c522c183600dbc2ede9aa...
Thanks for putting this to words. Now that you mention it, it is incredibly annoying, though the content was really interesting. I looked for an 'x' button on the banners more than once but then gave up and continued plowing through.
What is interesting is that I didn't get anywhere near the thought of commenting on this (or opening the chrome debugger or something to turn it off manually). So it's interesting that such visual noise can be a low-level annoyance without becoming a conscious thought. (Until your comment.)
Visual designers must be trained to notice what to people who aren't doing it is just noise.
To me the circle in the diagram which is supposed to be "equal visual weight" looks larger than the square, while the ones in the first example appear about the same.
But if I zoom the page out to 50%, or look at it on my phone, then things do work the way the author expects them to.
So I fear it may be difficult to correct for these effects as long as people use different screens.
> What is bigger: a 400-pixel square or a 400-pixel circle? Geometrically speaking, their width and height are equal.
The area of a circle isn't width * height though, obviously. If you plug pi * r^2 = 400^2 into WolframAlpha, you get a diameter of 2*r = 451.35 pixels, very close to the 450 pixels the author came up with.
For the icons too, maybe you could just count the pixels (ask Photoshop the amount of filled in pixels?) and make sure every icon has a similar amount.
Inscribing something in a circle isn't good enough. Use the image center of mass to really balance icons. Are there any design tools that provide center of mass?
Here's a minimal python/scipy script to measure the image centroid (of a b/w image):
from scipy import ndimage
im = ndimage.imread(args.input)
com = ndimage.measurements.center_of_mass(im)[:2]
size = im.shape[:2]
print("positive x is right, positive y is up")
print("image centroid is offset from image center by x:{0:.1f} pixels by y:{1:.1f} pixels".format(com[1] - size[1]/2, -(com[0] - size[0]/2)))
This makes me think of optical margins which are used in some typesetting software (like LaTeX with the microtype package). The thing is when it comes to geometry for human consumption the only thing that matters is how it looks. My Dad actually taught me this a long time before I knew about typography. He told me that while a spirit level is an important tool, it's a mistake to put a shelf up level if it doesn't look level next to the ceiling.
1. Size is obviously not height. It's the area of the shape. There are complications though, e.g. negative space often adds weight. Blurring shapes is a terrible idea here.
2. Aligning shape edges is also an optimization problem to equalize overshooting areas.
3. Finding a visual center has nothing to do with the circumcircle in a general case. It's a well-known centroid. But, again, there are lots of complications.
4. A circle is perfectly circular. There are other reasons for the "O" adjustments in typography. It's even mentioned later on with no connection to here.
5. The round corners is another story. In this case G2 fillets are most pleasing. It's hard to make this adjustment by hand, that is why the examples look bad and unnatural. Squircle, Lamé curve, has nothing to do with the iOS icon shape.
Most of these adjustments can be done with mathematical precision. The rest can be approximated well enough with mathematical models. Ideally, design tools should guide these adjustments. There is definitely interest. My most successful plugin for Sketch happened to be the one for optical adjustments http://designplugins.com/optically.