Screen PPI
96 PPI
Calibrate with a Credit Card
Place a standard credit card (3.375 inches wide) against your screen. Adjust the slider until the bar below matches the card's width exactly, then click Calibrate.
Calculators
Online Pixel Ruler: Measure Pixels Accurately on Screen
A pixel ruler measures distances on your screen in pixels. At 96 DPI, 96 pixels on a ruler equals approximately 1 inch. Calibrate by measuring a physical reference object.
Measure pixels directly on your screen with a free online pixel ruler. Drag to measure width and height, then calibrate for more accurate measurements.
Online Pixel Ruler: Measure Pixels Accurately on Screen
A pixel ruler measures distances on your screen in pixels. At 96 DPI, 96 pixels on a ruler equals approximately 1 inch. Calibrate by measuring a physical reference object.
Measure pixels directly on your screen with a free online pixel ruler. Drag to measure width and height, then calibrate for more accurate measurements.
What an On-Screen Pixel Ruler Does
An on-screen pixel ruler is a lightweight measuring tool you drag across your display to read pixel distances directly. It works like a physical ruler, except its native unit is screen pixels, with optional conversion to inches, centimeters, or millimeters once you calibrate it against a known physical object.
Designers, developers, and QA engineers use it to verify spacing, font sizes, button heights, icon dimensions, and layout grids on a live page. It's faster than opening dev tools to inspect every element individually.
How to Use the Pixel Ruler
Open the ruler tool and drag it across the area you want to measure. The ruler displays the current reading in your selected unit: pixels, inches, centimeters, or millimeters. Resize from either end to capture a specific span.
For pixel measurements in CSS layout work, no calibration is needed. The ruler reads CSS pixels natively, which matches what your stylesheets use.
For physical measurements (confirming that a print preview is the right size, or measuring a real object held against the screen), calibrate first. Place a credit card on your screen, drag the ruler to match its width, and click Calibrate. The ruler now knows your screen's true physical pixel density and its inch and centimeter readings will be accurate.
How to Calibrate the Ruler Accurately
Without calibration, the ruler uses your browser's reported pixel density, which is often wrong for modern high-DPI displays. The operating system may report 96 CSS PPI when the physical screen is actually 218 PPI or higher. That gap makes the ruler's inch and cm values unreliable.
Calibrate with a known-size object held against your screen. The easiest choice is a standard credit card: it measures exactly 85.60 mm x 53.98 mm (3.370 x 2.125 inches) worldwide. Place the card on the screen, adjust the ruler scale until it matches the card's length, and the ruler is now accurate to your specific display's physical pixel density.
Other reliable calibration objects: a US quarter (24.26 mm diameter), a UK 1-pound coin (23.43 mm), an iPhone 15 Pro screen width (~71 mm), or a printed ruler. Use something you've already measured with a physical ruler.
When a Pixel Ruler Is Useful (and When It Isn't)
Frontend debugging: verify that spacing between elements matches the design spec (16 px margins, 24 px gutters, 48 px touch targets). The ruler is faster than inspecting each element in dev tools.
Design review: confirm that actual rendering matches Figma or Sketch mockups, especially at different zoom levels. A 24 px heading in Figma should render as 24 CSS pixels on screen.
Accessibility audits: verify minimum touch target size (44 px per Apple HIG, 48 dp per Google Material), minimum font size (16 px for body text), and adequate line height (usually 1.5x font size).
Print preparation: confirm that a print layout's on-screen representation matches the intended physical size. A 100 mm print preview should measure 100 mm on your calibrated ruler.
Responsive testing: check that breakpoints fire at the correct widths and that spacing scales proportionally across viewport sizes.
The ruler isn't the right tool for measuring distances on screenshots (the file's pixel count doesn't map to screen pixels 1:1 unless zoom is exact), or for precision engineering work where a physical caliper is more appropriate.
Supported Units and Conversions
| Unit | When to Use | Calibration Needed? |
|---|---|---|
| Pixels (px) | Layout, CSS, design spec | No, native ruler unit |
| Inches (in) | US print design, screen size | Yes, calibrate to physical object |
| Centimeters (cm) | Metric print, ISO layouts | Yes, calibrate to physical object |
| Millimeters (mm) | Precision metric, engineering | Yes, calibrate to physical object |
| Points (pt) | Typography, print sizing | Yes, based on calibrated inches |
| REM | Responsive CSS design | Derived from browser root font size |
Accuracy and Limitations
Browser zoom breaks pixel measurements. Always measure at 100% zoom level. Most browsers show the current zoom in the URL bar; press Ctrl+0 (Cmd+0 on Mac) to reset it.
Device pixel ratio matters. A Retina display at 2x DPR means 1 CSS pixel = 2 physical pixels. The ruler measures CSS pixels by default because that's what CSS uses. To measure physical pixels, multiply by the DPR value.
External monitors often have different pixel densities than built-in laptop displays. Calibrate the ruler separately on each monitor if you switch between them, and save calibration values for future sessions when the tool supports it.
Practical Quality Notes for Online Pixel Ruler
This calculator is most helpful when the result is tied to a real workflow, not treated as a loose number. For Online Pixel Ruler, verify the input value, the unit context, the expected output format, and the real place where the result will be used. That context prevents the common mistake of copying a pixel value into a print, web, or CSS workflow where the reference size is different.
Online Pixel Ruler should be checked with the formula, a realistic example, and the actual output requirement before you export or publish. If the number looks unexpectedly large or small, check the unit direction first, then check the DPI, base font size, viewport width, or physical measurement that controls the calculation.
A good review pass for Online Pixel Ruler is simple: calculate once, compare against a known example, and preview the final output at the size people will actually see. A pixel ruler measures distances on your screen in pixels. At 96 DPI, 96 pixels on a ruler equals approximately 1 inch. Calibrate by measuring a physical reference object.
Checks Before You Use the Result
- Confirm that Online Pixel Ruler is using the same input unit your source file or design brief uses.
- Save the DPI, viewport, or font-size setting next to the final Online Pixel Ruler value so another person can reproduce it.
- Preview the Online Pixel Ruler output on the target medium before sending it to print, publishing it, or adding it to CSS.
- Recalculate Online Pixel Ruler after resizing, cropping, changing aspect ratio, or changing the root font-size or viewport assumption.
When the Number Needs a Second Look
Recheck the result if the project moves from screen to print, from desktop to mobile, from one social platform placement to another, or from a draft export to a production file. Small context changes can make a correct Online Pixel Ruler answer wrong for the final job.
Sources
Reference Sources
These external references support the page's conversion formulas, resolution guidance, and unit explanations.
w3.org
W3C: CSS Values and Units Module Level 4
Specification covering absolute lengths and resolution units such as px, in, cm, mm, pt, and dpi.
Visit source
developer.mozilla.org
MDN: CSS values and units
Reference guide for CSS measurement units and how browsers interpret physical and relative sizes.
Visit source
developer.mozilla.org
MDN: <resolution>
Reference for resolution units including dpi, dppx, and dpcm used in screen and print discussions.
Visit source
developer.mozilla.org
MDN: image-resolution
Explains how raster image resolution metadata interacts with CSS and print-oriented image workflows.
Visit source
Frequently Asked Questions
A pixel ruler is an on-screen overlay that displays measurements in pixels, overlaid directly on your display. It lets you measure UI elements, screen gaps, and layouts without leaving the browser -- useful for front-end development and design QA.
Hold a standard credit card (85.6 mm or 3.37 inches wide) against your screen. Adjust the ruler's calibration slider until the ruler matches the card width exactly. This calibrates for your screen's actual physical pixel density.
Accurate in CSS pixels, which may differ from physical pixels on HiDPI screens. On a 2x Retina display, 1 CSS pixel = 2 physical pixels. The ruler measures CSS pixels by default. Enable DPR correction in the settings to measure physical device pixels.
Yes, after calibrating. Place the object against the screen and read the measurement. Switch between pixels, inches, and centimeters as needed. For best accuracy, place objects flat against the screen surface.
Yes. Operating system scaling (such as 125% on Windows) changes the relationship between CSS pixels and physical pixels. Calibration accounts for this automatically, giving you accurate physical measurements regardless of your scaling setting.