PX Explained: What a Pixel Really Means
The px unit is the most familiar measurement in web development. Every developer has written font-size: 16px or margin: 10px. But what most developers assume — that 1px corresponds to one physical dot on the screen — has not been true for over a decade.
This page unpacks what px actually means in CSS, how it compares to other units, and the many other contexts where those two letters carry significance.
The CSS Pixel Is an Angular Measurement
The CSS specification defines the pixel unit not as a physical dot on a screen, but as an angular measurement. Specifically, 1px is defined as the visual angle of one pixel on a device with a pixel density of 96 DPI, viewed at arm's length (approximately 28 inches or 71 cm).
This definition was introduced to solve a practical problem: as screen pixel densities increased, a layout sized in physical pixels would shrink to an unusable size on high-DPI screens. By defining px as a visual angle rather than a hardware dot, the specification ensured that content sized in px would appear approximately the same physical size across different devices.
In practice, this means:
- On a 1x display (96 DPI): 1 CSS px = 1 hardware pixel
- On a 2x Retina display: 1 CSS px = 4 hardware pixels (a 2×2 block)
- On a 3x display: 1 CSS px = 9 hardware pixels (a 3×3 block)
The CSS pixel is therefore a reference pixel — an abstraction layer between the developer's intent and the hardware's capabilities. This is why rendering a true 1-pixel border on retina displays requires special techniques.
The PX vs REM Debate
One of the most persistent discussions in CSS is whether to use px or rem for font sizes, spacing, and component dimensions. The arguments center on accessibility, maintainability, and developer experience.
What REM Does
The rem unit is relative to the root element's font size. If the <html> element has font-size: 16px (the browser default), then 1rem = 16px. If a user changes their browser's default font size to 20px, then 1rem = 20px.
/* If html font-size is 16px (default): */
h1 { font-size: 2rem; } /* = 32px */
p { font-size: 1rem; } /* = 16px */
.small { font-size: 0.875rem; } /* = 14px */The Accessibility Argument
The core argument for rem is accessibility. Users who set a larger default font size in their browser preferences (a common accessibility need) expect all text to scale accordingly. If font sizes are declared in px, they are fixed — they do not respond to the user's browser font size preference.
When font sizes are declared in rem, changing the browser's base font size scales everything proportionally. This respects the user's choice and maintains the design's proportions.
When PX Is Appropriate
Not everything should scale with font size. Borders, shadows, and certain fixed-size UI elements (icons, minimum touch targets) are often better expressed in px because their visual purpose is independent of text size:
/* px for things that shouldn't scale with font size */
.card {
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* rem for things that should scale with font size */
.card-body {
font-size: 1rem;
padding: 1.5rem;
line-height: 1.6;
}A Practical Guideline
| Property | Recommended Unit | Reason |
|---|---|---|
| Font size | rem | Respects user accessibility preferences |
| Line height | unitless | Scales proportionally with font size |
| Padding / margin | rem | Maintains proportion to text |
| Borders | px | Visual consistency at all sizes |
| Border radius | px or rem | Depends on whether corners should scale |
| Box shadow | px | Visual effect, not content-related |
| Media queries | em | Responds to user font size for breakpoints |
PX vs Viewport Units
Viewport units (vw, vh, dvh, svh, lvh) are relative to the browser window size rather than font size or device pixels.
1vw= 1% of the viewport width1vh= 1% of the viewport height1dvh= 1% of the dynamic viewport height (accounts for mobile browser chrome)
Viewport units are powerful for fluid typography and full-screen layouts, but they have limitations. Text sized in vw alone can become unreadably small on narrow screens or excessively large on wide ones. The clamp() function addresses this by combining viewport units with px or rem bounds:
h1 {
/* Fluid: min 2rem, scales with viewport, max 4rem */
font-size: clamp(2rem, 5vw, 4rem);
}The px unit remains the right choice when you need an absolute minimum or maximum that does not change with viewport or font size — for example, ensuring a touch target is never smaller than 44px regardless of context.
The Physical Pixel
Behind every CSS pixel is the actual hardware: a physical pixel on the display panel. Understanding the physical layer clarifies why the CSS abstraction exists.
A physical pixel on an LCD or OLED display is composed of subpixels — typically three (red, green, blue) arranged in a pattern. The combination of these subpixels at varying intensities produces the full color spectrum visible to the human eye.
Pixel density, measured in pixels per inch (PPI), describes how tightly packed these physical pixels are. Higher PPI means smaller individual pixels, which means finer detail and smoother rendering:
| Display Type | Typical PPI | Device Pixel Ratio |
|---|---|---|
| Standard desktop monitor | 96–110 | 1x |
| MacBook Retina | 220–254 | 2x |
| iPhone (standard) | 326 | 2x |
| iPhone Pro Max | 460 | 3x |
| Samsung Galaxy S series | 400–500 | 3x–4x |
The related term DPI (dots per inch) is technically a print measurement but is often used interchangeably with PPI in digital contexts. For web development purposes, PPI and the device pixel ratio are the relevant metrics.
Other Meanings of PX
The letters PX carry meaning well beyond CSS. Here are the most common uses across different industries:
Patient Experience (Healthcare)
In healthcare, PX stands for Patient Experience — the sum of all interactions a patient has with a healthcare system. The field of PX research focuses on communication, care quality, and the emotional journey of patients through diagnosis, treatment, and recovery. Organizations like The Beryl Institute have established PX as a recognized discipline within healthcare administration.
Player Experience (Game Design)
In game design, PX refers to Player Experience — the game design counterpart to UX (User Experience). PX design considers engagement, flow state, difficulty curves, reward systems, and emotional responses. A PX designer's goal is to create experiences that are compelling and emotionally resonant, not just usable.
Pixel Art
The pixel remains the fundamental unit of pixel art, a digital art form where images are created at the individual pixel level. Originating from the hardware constraints of early video games and computer graphics in the 1970s and 1980s, pixel art has evolved into a deliberate aesthetic choice. Modern pixel artists create work at extremely low resolutions (sometimes as small as 16×16 or 32×32 pixels) and scale the result up for display, celebrating the visible grid as a stylistic element.
PX in Commerce and Finance
In financial markets, PX commonly appears as a ticker symbol prefix or abbreviation. In military and diplomatic contexts, PX refers to a Post Exchange — a retail store on a military installation. The abbreviation appears in numerous brand names and product identifiers across industries.
The Enduring Relevance of PX
From the spacer GIF era to modern responsive design, the pixel has been the web's fundamental unit of visual measurement. The CSS px unit has evolved from a direct hardware mapping to an abstraction layer, but its purpose remains the same: giving developers a predictable, consistent unit for building visual interfaces.
Whether you are debating rem vs px for your design system, rendering hairline borders on retina displays, or researching patient experience in a hospital system, PX is a two-letter combination that carries weight across disciplines.