# Why do squares look taller than wide on screens?

Take a look at this square:

To me it seems that the square is taller than that it's wide. Yet both axes measure 400 pixels.

What is causing this optical illusion?

UPDATE 10 March 2014: A lot of replies assume that the square is actually not a square (but that it's somehow stretched due to various technical reasons). I want to re-iterate: that's not the case. Well, at least not on my screen ;) -- When measuring it with an external ruler laid on top of my monitor I see that the length of the sides is equal.

• Out of curiosity: have you tried giving your square equal amounts of "margin" so that equal amounts of the background grid are visible on all sides? Does the illusion still exist then? – Marjan Venema Mar 29 '14 at 21:20
• It's a well known optical illusion. You could read about it on wikipedia. – WebMonster Mar 30 '14 at 20:32
• If you draw a circle on screen, is it a circle? If not, it sounds like your screen is set to a resolution that doesn't match the aspect ration of your monitor. – DA01 Apr 3 '14 at 17:40
• FWIW, I think it does look like a square... – Jørn E. Angeltveit Apr 7 '14 at 15:14
• @DA01, the point is: when I measure the square (with a ruler laid on top of my monitor), I see that it's actually a square with even sides. So the image is not stretched at all. – vincent.io Apr 10 '14 at 12:48

This is not caused by the pixel sizes, as the pixels on screens are supposed to be spaced in a way that the distances between the center of pixels is the same in each axis, otherwise photos and movies would seem squashed or stretched to viewers.

If you take a post it note and place it on your screen, you should see the same effect as you do if you adjust the zoom until the square box is the same size.

The effect may be caused by your brain comparing the square to its surrounding frame (the screen). Since the screen is a wider than tall rectangle (e.g. 16:9 ratio), then in comparison to it the square is taller than it is long. You could try physically rotating your screen 90 degrees to test if this is the cause.

Also, our vision is wider than it is tall (180 degrees vs. 135 degrees), therefore things we see might be effected by our comparison to the rectangle field of view, epecially since we are more used to looking sideways than up and down.

• I was thinking about something similar but failed to find any proof of this. Maybe architects know the correct name of this "illusion"? – alexeypegov Apr 10 '14 at 15:12
• Thank you for your answer. I awarded you the bounty. Even though it lacks definitive evidence, it's the only answer that fits the illusion (the other answers focus on the square actually not being a square on the screen, while it is). – vincent.io Apr 11 '14 at 10:49
• @VincentvanScherpenseel try rotating your screen 90 degrees as I suggested in the edit. – Danny Varod Sep 9 '14 at 18:34

This is related to what is commonly know as the vertical-horizontal illusion.

What happens is that the horizontal line segment appears to be shorter than the vertical line segment, despite being the same length.

One interpretation of why this happen is that it's due the the asymmetry of our normal field of vision (it's larger horizontally than vertically, which is while we tend to scan with our eyes things better horizontally than vertically). Surrounding the object in frames (i.e. a grid) can help compensate for the asymmetry.

• "This involves a bisecting component that causes the bisecting line to appear longer than the line that is bisected." So it seems like it's not the case, but the illusion itself is interesting. – alexeypegov Apr 4 '14 at 8:07
• As @alexeypegov said - interesting phenomenon but not the cause of this illusion – Henrik Ekblom Sep 9 '14 at 9:29

# 1. Aspect Ratio

It depends on your screen resolution's aspect ratio. You'd need to adjust it to see the square appropriately. Sometimes this stretches shapes in an awful way.

I've had to fiddle with mine at work for a while before it was fixed (sort of... See Eyeballing below)

# 2. CRT Monitors

In the unlikely event you are using a CRT monitor, this can also happen. Before the evolution to flat screens, in CRT monitors, the glass is actually curved outward. This can also effect the illusion of not only being able to confirm straight lines are straight but more slight inaccuracies in aspect ratio.

# Eyeballing

It is difficult for the human eye to perceive and accurately guess that the vertical and horizontal lines in the square are equal without assistance of measuring tools. Optical illusions tend to take advantage of this.

• Thanks for your answer, but regarding Aspect Ratio: when that happens it would actually have a different size when you measure it with an external tool such as a ruler? That doesn't happen at all: all sides have the same length. Also, I'm not on a CRT. – vincent.io Mar 31 '14 at 7:02

Because pixels are not square. Most of them at least.

Depending on a complex combination of source of the image, components of the projection system, dimension of the screen, standard adopted on that device and kind of image that you are watching the pixels may be square or not, more over square pixels may be converted to non-square and viceversa.

The explanation is a bit complex and I think that the best so far is to read Programmer's Guide to Video Systems and Square and Non-Square Pixels, written by Chris Pirazzi.

Some relevant information from those deep, technical documents are:

In particular, the geniuses who designed the standard definition (480i, 576i) digital electrical standards decided to make every line have 720 non-square pixels, which we'll talk about next, and these are the exact same 720 non-square pixels that you are often forced to deal with by various video devices on PCs.

Fortunately, sanity prevailed for HD (1080i and 720p), whose digital electrical signals all have square pixels.

To the above I'll add, unless you have a WUXGA monitor where the pixels get a bit stretched, getting again non-square pixels.

So, this gives us an incontrovertible way to answer the question of "how non-square are non-square pixels?" If 480i square pixels are sampled at 12 3/11 MHz, and 480i non-square pixels are sampled at 13.5 MHz, that must mean that each non-square pixel has aspect ratio:

12 3/11 MHz / 13.5 MHz = 10 / 11

Another element on the complex equation mentioned, the pixel aspect ratio can be seen in the tutorial Understanding the use of square vs non-square pixels in AE (Adobe After Effects). This article focuses on the pixels itself and not than much on the electrical aspect. In the next quote we can see how some people and programs know about the differences and how to work with it.

The drop dead simple way to work in a square pixel comp is to use 648 X 486 for your SQUARE PIXEL project and then just re-size to 720 X 486 NTSC/DV aspect ratio comp for rendering.

Another reference is found on the [Apple - Pixel Aspect Ratio] part of the manual of Final Cut Pro, where we can read something like:

The ITU-R BT.601 specification makes it possible to transmit either NTSC or PAL information in a single signal. To achieve this goal, both NTSC and PAL video lines are sampled 720 times. In both NTSC and PAL video, the frame displayed has an aspect ratio of 4:3, yet neither 720 x 486 nor 720 x 576 constitutes a 4:3 ratio. The solution to this problem is to display the pixels (the samples of light intensity) taller-than-wide, or wider-than-tall, so that they fit into a 4:3 frame. This results in the concept of “rectangular pixels”—pixels that must be stretched or squeezed to fit in the 4:3 frame. Most SD video devices actually use 704 or 708 pixels for picture information but stretch these pixels to 720 when recording to tape.

Finally, we can't avoid at least one mention of Wikipedia, so here we have an article about Pixel aspect ratio which mentions both aspects, electrical signal and device resolution. The talk section of that page is long, but has some interesting comments.

Conclusion

You may have square pixels on a square capable device, those will look square and everything will be OK, but any other combination, will make things non-square, and considering all the involved elements, it's not surprising to have non-square pixels most of the time.

• The sub-pixels are not square, however, the combination of the RGB sub-pixels is what you should be considering, though even this doesn't have to be a square to reach a uniform density. The distance between the edge of the pixels in each axis is supposed to be defined so that the distance between the centers of the pixels is the same in each dimension. – Danny Varod Apr 3 '14 at 16:20
• @DannyVarod: I'm not talking about subpixels, where did you get that Idea? As you mentioned, that distance between whole pixels is supposed to be defined, like the vertical one, but as it happened, it was not clearly done, many specifications assumed different dimensions and many defaulted to extrapolate 4:3 dimensions from a medium and era that didn't care about boundaries but the centre of the image. Did you read the first two links? – PatomaS Apr 3 '14 at 23:16
• Thank you for your extensive explanation. Just a simple question: doesn't that mean that when you would measure it with a ruler, you would actually get different line lengths? Because when you measure the lines, they are exactly equal. – vincent.io Apr 10 '14 at 8:21
• It depends on the situation, when the effect is caused by the device, or any element related to the pixels, then the sides should differ a bit; I'm not sure how much on each case since there are many elements involved. For instance, you square on my main monitor is square and looks square, but on my laptop is wider because the screen stretches the image. On the other hand, if the image looks non-square, but after measuring with a ruler, it is square, then it is the visual effect mentioned by @Krazer. – PatomaS Apr 10 '14 at 8:57
• After reading your comment, I measured your square on my monitor, and there is a little difference vertically, almost 2mm. Which most probably is related to my point of view or the possible inclination of the ruler. Or it may be due to the rendering of the pixels on my screen. Although, most probably is just my poor vision and shaky hand. ;) – PatomaS Apr 10 '14 at 9:01

I am pretty sure it has got something to do with how we perceive objects. It's not random that famous building have a golden ratio format (about 16:10), the same as modern screens.

That form feels stable for humans since it's a ratio found everywhere in nature. If a house would've been built with a 1:1 ratio, it wouldn't feel as stabile and secure as one that's wider than it's width. That's why I think that a 1:1 ratio feels higher than wider since the norm seems to be 16:10. It might be that we think that a 1:1 ratio is too high, therefore we are given the illusion of a non square figure.

It's not a perfect answer because I have yet to find evidence for my gut feeling, but I am on to it :)

This doesn't have anything to do with pixels, display type, or aspect ratio. It's an optical illusion. Our horizontal field of view is greater than our verticle field of view. I'm pretty sure that's all you are experiencing.