posted by Matt Ward on Oct 23, 2010.
The square is one of the most fundamental of all shapes, and is based entirely on the balanced proportion between its edges and angles. In this article, however, I would like to look at the perception of squareness, and suggest how a slight imperfection can sometimes make a shape look more square-like than a true, perfectly balanced square.
A few months ago, I posted an article entitled “Imperfect Perfection: The Golden Ratio,” in which I discussed the concept of perfection, Leonardo da Vinci’s Vitruvian Man, the beauty that exists in certain balanced proportions, and ultimately even the golden ratio itself. I touched on a number of different topics, but the underlying concept that held the entire article together was the idea that there exists a kind of perfect beauty in that which may seem imperfect due to a lack of symmetry or balance.
In today’s article, I would like to talk about another, much more subtle form of imperfect perfection, having to do with that balanced shape that we like to call the square.
A few months ago, I was working actually working on some design concepts for a unique fold-over self mailer. The idea was to have three separate panels that folded over onto each other to from a single, square piece that could then be clip sealed and mailed. I did some measuring and calculations and then actually built a paper mockup of my concept, to be able to show as a sample. There was just one problem.
When everything was folded down, the finished piece didn’t look like a square.
Curious, I grabbed my ruler and did some measuring. Yes, all four sides were exactly the same length, which is, of course, part of the very definition of what makes a square a square. Yet, as I looked at the paper mockup again, it still didn’t look right. Somehow, it looked just marginally wider than it was high.
Have you ever noticed this? Maybe it’s just me, but I have seen the same thing happen in other places before too. I’m sure that an optical physicist could explain it to us, but this particular experience intrigued me enough that I undertook some some simple experimentation and measuring of my own.
First, I created three different shapes, all with the same height of precisely 78mm. I created the first shape with a width of 78mm, making it a perfect square. I then created the second shape with a width of 72mm, a reduction of 6mm. Following this same pattern, I made the third shape 66mm in width. Here is a basic diagram of what I created.
The first shape is, obviously the true square, and the third shape is quite clearly a rectangle. My interest was primarily in the middle shape, to see if it would have more of the appearance of a square. In this instance, it was close, but still looked distinctly rectangular.
That lead me to believe that a difference of 6mm was probably just a bit too severe. So, I tried repeating the exact same process with a smaller, 3mm differential.
This, of course, meant that the first shape was (still) the square, while the second shape had a width of 75mm and the third shape had a width of 72mm. From my own perspective, this worked much better and the middle shape had a much nicer appearance that seemed distinctly squarish to my eye. Thus, through this very rudimentary experiment, I decided that, for the purposes of what I was designing, an interesting proportion of 12.5 : 13 (or 25 : 26) would actually make a more visually attractive design that a perfectly square piece!
One day, it might be interesting to actually set up a more controlled experiment with a broader ranger of test subjects (beyond just me). This would certainly give us a better understanding of this particular ratio.
Screen vs. Page
Now, many of you are probably looking at my diagrams and thinking that I am absolutely nuts, because the actual square certainly looks the most like a square out of the three shapes. Looking at the screen, I actually feel much the same. I would, however, encourage you to get a piece of paper, a pencil and a ruler and actually try recreating the diagrams manually.
There appears to be a very slight difference between the way my eye perceives the square on the screen versus the way it perceives the square on the page. I’m not sure if this has something to do with the nature of a pixel display, or something else entirely, but when I compare the digital diagrams that I have included above against the ones I drew by hand, every digital shape appears narrower than its graphite-and-paper counterpart.
This, of course, implicitly suggests that the slight, imperfect variations in proportion may very well need to be carefully considered based on whether or not a design is intended for display on a screen or to actually be printed on a page.
Another interesting thing that I’ve noticed, though again in a very unscientific context, is that the relative appearance of squareness does seem to be at least somewhat contingent upon distance. For example, as I write this, I have a pad of perfectly square Post-It notes on the desk in front of me. If I pick them up and look at them closely—perhaps six to eight inches in front of my face—I really notice that the pad seems wider than it is high (even though it’s not).
However, if I set the same pad several feet away, this apparent illusion dissipates (or at least lessens), and it looks to be more distinctly square.
I’m not really sure how to replicate this illusion through illustration here, so I’m just going to encourage you to try it yourself. Take something perfectly square and look at it at a relatively close distance. Then, look at the same object from a greater distance. Do you notice any difference between the way you perceive the shape of the object?
While I am certainly no physicist, I would imagine that this particular phenomenon has something to do with the way the lenses in our eyes bend light, and the way our brains then interpret the signals from our eyes in order to form the image that we “see”. Perhaps the closer something gets to the eye, the more (or less) the light gets bent through our eyes, causing this apparent illusion of objects being wider. Does anyone out there know of any theories or research in this area? It would be very interesting to read!
Regardless, having gone through this discussion, there are a couple of key points and ideas that I think may be worth noting. First, I really believe that, as designers, we cannot allow ourselves to become slaves of mathematical proportioning and alignment. We certainly want to be using these as tools and guidelines to help bring balance to our work, but there comes a point when we have to also start trusting our own instincts. If something is perfectly and mathematically balanced, but just doesn’t look quite right, tweak it so that it does!
Design (especially with type) often involves a great deal of subtle bending of the rules, of moving just off of a grid, or just slightly off outside of exact alignment, all to help create the illusion of better balance.
Second, I would suggest that the 12.5 : 13 rectangle is actually quite a lovely shape, regardless of whether you see it as a square or an nearly balanced rectangle. There is a certain strength and elegance to it, and it’s definitely just one more example of an imperfectly perfect element that I will be keeping in my design repertoire.
What about you? What are your thoughts on this issue of relative squareness? Have you had a similar experience? Something else entirely? Should we always make our squares perfectly balanced, or should occasionally tweak their proportions for the sake of aesthetics?
Also from Echo Enduring Media: