UX Glossary · P
Pixel
Also: px · CSS pixel · Device pixel
The smallest addressable unit of a display, and a unit whose meaning in design has drifted from the hardware.
A pixel is the smallest addressable element of a display. The word is a contraction of “picture element”, in use since the 1960s.
Why the word is now ambiguous
Since high-density displays arrived, “pixel” means two different things.
A device pixel is a physical dot on the screen. A CSS pixel is a unit of measure that stays roughly constant in apparent size regardless of density. On a display at 2x, one CSS pixel is drawn with four device pixels.
This is why a “1px” border looks the same on a modern phone and an old monitor, and why images need to be supplied at higher resolution than their layout size to look sharp.
What follows for design work
Specify in CSS pixels, supply raster assets at 2x or 3x, and prefer SVG where possible, since vectors are resolution independent by definition.
WCAG target sizes are expressed in CSS pixels, so the 24 by 24 minimum in success criterion 2.5.8 is a layout measurement rather than a hardware one.
Where pixels are the wrong unit
Type and spacing that should respond to a user’s settings. A font size in rem scales with
the browser’s base size, which users with low vision change deliberately. A size fixed in
pixels ignores that preference, which is a real accessibility failure rather than a
stylistic choice.