• Home
• The em
  • The em square
  • Font size
• DPI and PPI
  • Screen dots per inch
  • Screen pixels per inch
  • Image dots per inch
• CSS Oddities
  • CSS Inch
  • CSS Pixel
  • CSS3 x-height
• Square Pixels
• Definitions
• Contact

Square Pixels

Pixels are not tiny colored squares!

Pixel is short for ‘Picture Element’ and here I’ll define a (single) pixel as the picture element that illuminates the smallest possible screen area while showing the full range of RGB color. A picture element, however, is not limited to being a single pixel but can be a group of pixels. What do we call a group of pixels? - why a pixel of course. Ponder why a screen displaying 1024 pixels horizontally (1024 x 768), and fixed by its physical construction, can display only 800 pixels horizontally (800 x 600).

So what is the physical shape of a pixel? Well, the actual shape of the illuminated points on a screen depends on the screen technology as shown in Pixel geometry. Pixels are not small squares. So why do people think a pixel is square? Because of the way that graphic applications show zoomed images.

This image is a single red pixel magnified 64 times, and I can almost hear you saying “there you are - pixels are square” but it’s an illusion. The red square is actually 64 x 64 pixels giving 4096 pixels. The single pixel has been replicated 4096 times . How could it be otherwise? The screen area illuminated by a single pixel is fixed by the physical construction of the screen and doesn’t change size. Don’t confuse digital zoom with optical zoom. With digital zoom magnification is simulated by replicating pixels. A single object magnified by optical zoom remains a single object. Note that with digital zoom you will always get equal replication of a pixel in both horizontal and vertical directions i.e 10 x 10, 64 x 64 etc.

This image shows the phosphor dot triad geometry for a single pixel on a shadow mask CRT and it’s obvious that this triad geometry is not going to produce a square area of illumination, in fact ‘blob’ would be a better description. Now the interesting question here is if the pixel shape is a blob, at least in a Shadow Mask CRT, then why does the group of replicated pixels in the zoomed image look like a square?

In this image I’ve represented a single pixel ‘blob’ as a circle, because I’m not any good at drawing blobs. The answer is that the pixels are on a square grid, the blobs overlap, and the eye perceives this as a square. In fact the actual pixel shape doesn’t matter much at all because when you have enough of them to perceive a shape then that shape will be square. It’s an illusion.

The term "Square Pixels" has nothing to do with the physical shape of pixels.
Say you have a screen with an aspect ratio of 4:3. This means the physical screen width divided by the physical screen height is 4 divided by 3 = 1.3333 . Assume video resolution is set to 800 x 600. Now 800 divided by 600 is also 1.333 so the video aspect ratio matches the screen aspect ratio. You have square pixels when the video resolution aspect ratio = screen aspect ratio. If video resolution is now set to 1024 x 768. then, as 1024 divided by 768 is 1.333, you still have square pixels because the video resolution aspect ratio still equals the screen aspect ratio. If you could set video resolution, with the same screen, to 1280 x 1024 then the video aspect ratio would be 5:4 which wouldn’t match the screen’s 4:3 aspect ratio so you would not have square pixels.

So what, in the end, does it all mean? Only that if you don’t have ‘square pixels’ then the physical horizontal distance occupied by a given number pixels does not match the physical vertical distance occupied by that same number of pixels. In other words, a square shape won’t be square.