In CSS, the px unit is frequently misunderstood. Since it’s an abbreviation of the word pixel, many mistake it to indicate the size of the smallest dot (or pixel) on their computer screen. Were this so, type set in px would continue to shrink on devices with better and better screen resolution – ones able to draw more dots per inch. With advances in technology, the screens of tomorrow would show the web pages of today as tiny blips, legible only with a magnifying glass.
Fortunately, this is not the case: one px should always appear to be the same size, no matter what the future holds in store. Oddly, it’s not so much an external measurement as it is an internal one. One px is the size of a particular dot cast upon the retina. It’s literally a pixel of the human eye, occupying the same amount of space in one’s field of vision as the smallest dot on a screen with a resolution of 96 dots per inch, placed an arms length away.
The distance between a device and our eyes – rather than its resolution in dots per inch – should determine the actual size of a px (as measured with a ruler placed against the screen). The further the average viewing distance of a device, the larger a dot it should draw. A hand held device, read closer to the eyes, should draw a px as a smaller dot than its big brother on the silver screen.
The principle works much like the way we perceive the size of the sun and moon. On average, the sun is 400 times further away from us than the moon, but also happens to be 400 times as large. To us, they appear to be the same size (especially during a solar eclipse), just as type set in px on a mobile phone screen should seem the same size as it is when shown on a large computer screen.
The px unit belongs to a class of measurements known as relative length units, because its actual size is figured relative to something else, in this case, viewing distance. In contrast, the golden standard of classical typography, the pt or point (typically one 72nd of an inch), is an absolute unit.
Generally speaking, absolute units should be avoided when setting type on the web. By the book, absolute units will produce type at different relative sizes on devices with different average viewing distances. A glyph set at 12pt may look fine on a computer screen (if the screen is placed an arm’s length away, it will look the same as 16px), but might look too large on a hand held device sporting an 8×5 cm screen (almost taking up a 3rd of the display width) and too small on a movie screen spanning 8×5 ft (a 96th of the width).