• 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

The CSS Pixel

When you have a display that has a high physical pixel density then a given number of pixels occupies less physical space on the screen than it would on a display with a low physical pixel density. Say we have a ‘normal’ pixel screen density and we draw a line 20 pixels wide. The software maps one drawing pixel to one device (screen) pixel so we get 20 device pixels illuminated. With a ‘high density’ pixel screen the device pixels are smaller and closer together so mapping one drawing pixel to one device pixel results in that 20 pixel line being a lot shorter. If the software maps one drawing pixel to, say, two device pixels then the line specified as 20 pixels long now illuminates 40 device pixels and, hopefully, the line looks to be about the right length.

This is what the CSS 2.1 specification Lengths says about pixels.

Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.

A pixel that maps to one or more device pixels is called a ‘CSS pixel’, although the CSS specification doesn’t actually use that term.

There is a lot of unanswered questions here:

• What is ‘a typical computer display’?
• Where is the demarcation line between ‘normal pixel density’ and ‘high pixel density’?
• How would a program determine if it’s drawing to a high pixel density screen?
• How many device pixels should be used in the mapping.

Reference Pixel in the CSS Specification

When I first saw the following section in the CSS specification I had to read it several times because I thought it might have been April 1st.

It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch)..

None of my screens have had a pixel density of 96 physical pixels per inch, as shown here in the Pixels per Inch column in the table They’ve just borrowed the Windows default value for screen dpi that exists solely for the purpose of translating inches to pixels, and is nothing to do with the pixel density of a display.

Is there a NIST standard for reader’s arms? Perhaps browsers should allow users to store the length of their arms, or at least make them specify how far away from the screen they are sitting!!