Plain-language explainer
CSS Pixels vs Device Pixels
A CSS pixel is the unit a webpage uses for layout. A device pixel is a tiny physical addressable area on the display. They can be the same size, but on many modern screens one CSS pixel is drawn using several device pixels.
Published and reviewed September 6, 2026
The short answer
CSS pixels answer, “How much space does this page element use?” Device pixels answer, “How many physical display pixels are used to draw it?” Neither answer tells you the object’s size in centimeters by itself.
200 CSS px
Page layout width
400 device px
At DPR 2, across one axis
Physical width?
Needs display scale or calibration
CSS pixels are the browser’s layout unit
When a button is styled as width: 200px, the browser gives it 200 CSS pixels of layout space. JavaScript measurements such as an element’s bounding rectangle are also normally reported in CSS pixels.
CSS keeps fixed ratios between its absolute units: 1 CSS inch equals 96 CSS pixels, and 1 CSS centimeter equals 96/2.54 CSS pixels. That is a conversion inside CSS. On a screen, it does not promise that the rendered “inch” occupies one physical inch.
Device pixels belong to the display
A device pixel is the smallest display area the device can address with its full range of colors. High-density screens pack more of these pixels into the same physical space. The browser may use a block of device pixels to draw one CSS pixel so text and controls do not become uncomfortably tiny.
Think of CSS pixels as squares on a design grid and device pixels as the dots used to paint that grid. The design can stay 200 squares wide even when a sharper screen uses more dots to draw it.
What devicePixelRatio actually tells you
window.devicePixelRatio is the ratio between the size of a CSS pixel at the current page zoom and the size of a device pixel. A value of 2 often means one CSS pixel spans about two device pixels across and two down.
Example: a 200 px-wide element at DPR 2
Its layout width is still 200 CSS px. A screenshot or backing bitmap may use about 400 device pixels across that width. The physical width still depends on the display and current scaling.
Page zoom matters because it changes the current size of a CSS pixel. This is one reason an online ruler calibrated at 100% zoom can be wrong after zooming to 125%.
DPR is not PPI
| Value | What it compares | Can it give physical size alone? |
|---|---|---|
| CSS px | Web layout distance | No |
| Device px | Addressable display pixels | No—not without pixel density |
| DPR | CSS pixel size to device pixel size | No |
| Hardware PPI | Device pixels per physical inch | Not by itself when OS and browser scaling intervene |
| Calibrated effective PPI | CSS pixels per physical inch in this setup | Yes, as an estimate for the current setup |
How Online Ruler converts pixels to a length
The ruler measures its on-screen distance in CSS pixels. For physical units, it divides that distance by the effective PPI saved in the tool. For centimeters, it then multiplies inches by 2.54.
inches = CSS px Ă· effective PPI
centimeters = CSS px Ă· effective PPI Ă— 2.54
Worked example
Suppose a selection is 220 CSS px wide and your calibration found 110 effective CSS pixels per physical inch. The estimate is 220 ÷ 110 = 2 inches, or 5.08 cm. Using the default 96 instead would produce about 2.29 inches—showing why calibration matters.
Which number should you use?
- Building or reviewing a webpage: use CSS px.
- Preparing a sharp canvas or screenshot: account for DPR as well as CSS size.
- Estimating centimeters or inches on this screen: use a calibrated effective PPI.
- Doing precision physical work: use a physical measuring tool suited to the required tolerance.
Sources and scope
The definitions and unit relationships above follow the W3C and CSS Working Group specifications. The worked examples explain how those definitions apply to this ruler; they are not claims that all browsers rasterize every element identically.
Try it on the ruler
Open the tool, keep browser zoom at 100%, and use pixels first. Calibrate before relying on cm or inches.
Open the online ruler