Accurate physical units require calibration. Without calibration, millimeter, centimeter, and inch readings stay approximate.
Display testing utility
Screen Ruler
Screen Ruler is an online ruler and pixel ruler for measuring visible content in millimeters, centimeters, inches, or pixels after a quick calibration.
Accurate physical units require calibration. Without calibration, mm, cm, and inch readings are only approximate.
Calibrated measuring workspace
Measure objects on screen with calibration-first controls
Use the rulers, guides, segment mode, and overlay frame to measure visible UI, product photos, diagrams, or spacing samples. Physical units stay honest: they become trustworthy only after you match a real-world reference.
Accuracy state
Measure objects on screen with calibration-first controls
Accuracy warnings
Browser zoom, OS display scaling, monitor changes, docking, and different window setups can make an old calibration less trustworthy.
Pixel mode measures screen-space layout distance. It is useful before calibration, but it does not promise hardware-device-pixel precision.
Use the right companion tool
Need density math or full-display context instead of a ruler overlay? Jump directly into the related measurement cluster.
- Default card reference: 85.6 mm × 53.98 mm.
- The long edge is usually easier to match precisely than the short edge.
- Saved calibration stays local to this browser and display environment.
How to use the screen ruler accurately
Screen Ruler is built for people who want a practical online ruler without fake promises. When the page opens, you can already use the guides, drag-to-measure mode, overlay frame, and pixel ruler controls. That makes the tool useful immediately for screen-space checks such as UI spacing, image dimensions, card mockups, or layout comparisons. If you need millimeters, centimeters, or inches, start with calibration. The fastest path is the card workflow. Place a standard bank card flat against the display, choose width or height, and resize the outline until it matches the outer edge of the card. Save that result, then measure with the unit you care about. If you only need a pixel ruler, you can skip calibration because pixel mode does not depend on a physical scale. The first 100 words matter for intent, so the page states the core promise early: this screen ruler works as an online ruler, but accurate physical measurement starts only after calibration. That honesty is useful whether you want a quick ruler online, a measure-on-screen helper, or an on-screen ruler for design checks.
Why calibration is required for an online ruler
A browser can read viewport size, CSS layout values, and device pixel ratio, but it still does not reliably know the true physical size of the display in front of you. That is why many thin online ruler pages feel suspicious. They show a centimeter or inch scale immediately and imply that the ruler is already true to life. In reality, browser zoom, operating-system scaling, Retina-style density, external monitors, docked windows, and accessibility zoom can all change how big one CSS pixel appears on screen. Screen Ruler treats that limitation as part of the product, not something to hide. Before calibration, physical units are marked approximate. After calibration, the page stores a scale factor tied to this browser and environment. If your setup changes later, the tool warns that accuracy may be reduced and suggests recalibration. This is the key difference between a trustworthy screen ruler and a misleading one: the page explains why an online ruler needs a reference before it can behave like an actual-size ruler.
How card calibration works
The default method uses the standardized ISO ID-1 bank-card footprint: 85.6 mm × 53.98 mm. That size is globally common, easy to explain, and practical because most people already have a payment card, debit card, ID card, or membership card with similar dimensions. In Screen Ruler, you can calibrate to the long edge or the short edge. The long edge is usually easier because a longer visual line reduces tiny alignment errors. Place the card flat against the screen, ignore embossed digits and rounded corners, and match the outline to the real outer edge. If the card does not sit perfectly because of a phone case, curved glass, or a thick bezel, use your best flat alignment and save only when the outline looks stable. If you do not have a standard card, manual calibration is available. Enter the known width of another visible object on screen and match that reference instead. Manual mode is less foolproof, but it is still better than pretending the browser can infer real-world size automatically.
Millimeters, centimeters, inches, and pixels explained
Screen Ruler supports four measurement modes because users do not all mean the same thing when they search for an online ruler or pixel ruler. Millimeters are useful for small objects, precise print previews, spacing checks, and hardware comparisons. Centimeters are easier when you want a broader physical measurement, such as a label, package mockup, or visible product photo. Inches are common for display work, especially when you are checking whether one inch on screen really looks like one inch after calibration. Pixel mode is different. It is a screen-space ruler for CSS layout distance, not a claim about physical size. That makes it ideal for designers, QA testers, and front-end developers who want a browser ruler, website spacing ruler, or UI ruler without touching real-world units. The important distinction is simple: physical units depend on calibration, while pixel mode does not. If you are comparing how large something appears on the panel, use calibrated mm, cm, or inches. If you are comparing layout geometry, use the pixel ruler mode and treat the values as screen-space measurements.
When to use a screen ruler vs a PPI calculator
Use Screen Ruler when the question is practical and visible: how wide is this object on my display, how tall is this mockup, how many pixels separate these two elements, or how large does one centimeter look on this screen right now? Use a PPI calculator when the question is structural: how dense is the panel, how many pixels fit into each inch, or why does one inch appear different across two displays? The tools support each other. Screen Ruler turns calibration into a hands-on measuring workflow. PPI Calculator explains the density math behind that workflow. What Is My Screen Size helps when you want browser-reported resolution, viewport size, and DPR context before you measure anything physically. Together they cover density, dimensions, and on-screen measurement without mixing the concepts.
Common accuracy mistakes and how to avoid them
The most common mistake is trusting physical units before calibration. The second is calibrating once and forgetting that the environment changed later. Browser zoom, operating-system scaling, moving the tab between monitors, docking a laptop, rotating a tablet, or switching between mirrored and extended displays can all change the relationship between CSS pixels and physical size. Another frequent issue is sloppy card alignment. Match the outer edge, not the embossed numbers, printed artwork, or shadow around the card. On phones and tablets, touch input works, but finer alignment is often easier in landscape mode or on desktop with a mouse, keyboard, or stylus. If you want to measure a visual box rather than a line, use the overlay frame instead of guessing from the axes. If you want clean horizontal and vertical distances, use guide mode. If you want endpoint-to-endpoint distance, use segment mode. When the tool warns that accuracy may be reduced, do not ignore it. Recalibration takes seconds and is the safest way to keep an actual-size ruler honest.
FAQ
How accurate is the screen ruler after calibration?
It can be very useful for practical measurement, but accuracy still depends on careful alignment and an unchanged display environment. If zoom, DPR, monitor, or scaling changes, recalibrate before trusting physical units.
Why is the ruler wrong before calibration?
Because browsers do not reliably know the true physical size of your current display setup. Without a real-world reference, millimeters, centimeters, and inches are only estimates.
Can I calibrate with a credit card or debit card?
Yes. The default workflow uses the standard 85.6 mm × 53.98 mm bank-card size, so most credit cards and debit cards are suitable references.
What if I do not have a standard card?
Use the manual reference mode and enter the known size of another visible object on screen. It is less foolproof than the card workflow, but still better than skipping calibration.
Does browser zoom affect accuracy?
Yes. Browser zoom can change the effective relationship between CSS pixels and physical size, so Screen Ruler warns when recalibration is recommended.
Does operating-system display scaling affect accuracy?
Yes. OS scaling, external monitors, docking, and DPR changes can all alter how large things appear on screen, even if the page URL stays the same.
What is the difference between pixels and inches in this tool?
Pixels are screen-space layout measurements and do not need calibration. Inches are physical measurements and only become trustworthy after calibration.
Can I use the ruler on a phone or tablet?
Yes. Touch controls work, but precise alignment is usually easier in landscape mode or on desktop. Small screens can still measure, but they offer less room for fine adjustments.
Does the tool save my calibration?
Yes. Calibration is saved locally in your browser so the page can restore it later on the same device and setup.
When should I use a PPI calculator instead of a screen ruler?
Use a PPI calculator when you need density math or want to understand why physical size looks different across displays. Use Screen Ruler when you want to measure something visible on screen directly.
Related tools
Physical units are approximate until you match a real reference on this screen.