I am available for freelance work - HIRE ME

Imperfect Perfection: The Almost Square

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.

almost-square-diagram-A

almost-square-diagram-A

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.

almost-square-diagram-B

almost-square-diagram-B

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.

Gauging Distance

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!

Conclusion

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?

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Oct 23, 2010

Nejt says:

I noticed this in an art class a couple of years ago. I was trying to create a board for a board game, and when I researched the size for the squares, I noticed that they were actually rectangular!

Apparently, the creators of the game were bothered by how perspective made a square board seem rectangular in front of a player, so the standard is to make them slightly wider than tall. Pretty interesting stuff!

Oct 24, 2010

steve says:

Often times it is relative to shapes around it or experience. It is rare to hold a square document for example. Just like on screen squares can look rectangular relative to the screen itself.

Great article, it is good to see critical thinkers commentary on design instead of just making lists or pandering to graduates.

Oct 25, 2010

Steve Robillard says:

The distance effect may have to do with the fact that you are actually seeing to different versions (one with each eye), and the focal distance.

Oct 27, 2010

Paradox says:

You’re not a nut.

This is a very interesting read. I actually had very similar experiences if not exactly the same ones.

I think it’s safe to say that looking at a square on the screen versus looking at a square not on a screen provides different perceptions as to the dimensions of the square, or any shape for that matter.

Illusion is such an amazing “effect”!

Oct 27, 2010

Sari Grove says:

There is a small app called LensTweaker that deals with this situation…You put your photo in, & you can correct for what is called Barrel Lens Distortion…What that means is- when you take a photo of something, say a square, the edges of the square will come out pushed out at the sides like a barrel…You are quite brilliant to have posited this yourself…Yes, when you look at an object, there is a certain amount of distortion- which changes depending on distance…So, if you are close up to a person, their nose may look huge, whereas from further away, it becomes more normal…Which is why it is often truly hilarious when you kiss someone for the first time- closing your eyes is probably because people look so funny up close…So, what you have done, by making your square more rectangular, is you are trying to account for the barrel lens distortion that you are seeing…The sides of your rectangle are pushing out, making it look more square, whereas your square shape also pushes out, but it creates a feel that it is then too wide…Since most people will also be looking at your invitation or whatever, up close, you may be correct in narrowing the width to account for barrel lens distortion…On the other hand, if people are going to stick the invite up on their refrigerators, & see it from a distance, then the square appearance will disappear & they will notice…Or, perhaps, you can completely compensate for barrel lens distortion, by producing an inverted barrel shape )( …Then when barrel lens distortion strikes
( ), it will correct to straight lines?

Leave a Comment

Links

  1. CSS Brigit | Imperfect Perfection: The Almost Square

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014