Free Online Ruler — Measure Anything on Your Screen

The Online Ruler is a browser-based measurement tool that overlays your screen with accurate ruler markings along any edge. Hold a physical object up to your monitor and read off the length in pixels, centimeters, or inches — no app install required, no sign-up, completely free.

Unlike a generic ruler image, this tool calibrates to your screen's actual pixel density (PPI), so measurements reflect real-world physical dimensions — not just CSS pixels. Whether you're checking the size of a component, verifying a print layout, or just curious how wide your phone is, the Online Ruler gives you an instant, reliable answer.

How to Use the Online Ruler

  1. Open the tool — The ruler appears immediately along the top and left edges of your screen.
  2. Calibrate your screen — Click the calibration button in the controls panel and choose a method: device lookup, screen diagonal, or credit card drag. This step is important for accurate cm/inch readings.
  3. Choose your unit — Switch between pixels (px), centimeters (cm), and inches (inch) using the unit selector in the controls panel.
  4. Toggle ruler edges — Enable or disable the top, bottom, left, or right ruler as needed for your measuring task.
  5. Place your object — Hold the item against the screen edge aligned with the ruler's zero mark, and read the measurement directly off the tick marks.
  6. Use guidelines — Enable crosshair guidelines from the controls to mark specific points. Click anywhere on the screen to place a persistent marker; press Escape to clear all markers.

How to Calibrate for Accurate Physical Measurements

By default the ruler uses 96 PPI (the CSS standard reference density). Most modern screens — especially HiDPI / Retina displays — have significantly higher PPI, so uncalibrated measurements will be off. Three calibration methods are available:

Device Lookup

Select your exact device from a database of 80+ phones, laptops, tablets, and monitors. The tool pre-fills your screen's manufacturer-stated PPI value instantly.

Screen Diagonal

Enter your monitor's diagonal measurement in inches (usually printed on the box or listed in the device specs). The tool calculates PPI from your screen resolution and that diagonal.

Credit Card Drag

Drag the on-screen card outline until it exactly matches a physical credit card (ISO 7810 ID-1: 85.6 × 54 mm). The most tactile and accurate method for any unlisted device.

Your calibrated PPI is saved to localStorage and remembered across browser sessions.

Features

  • Three measurement units — pixels, centimeters, and inches, switchable at any time
  • Four ruler edges — top, bottom, left, and right; enable any combination simultaneously
  • PPI calibration — three calibration methods for physically accurate cm and inch readings
  • Device database — 80+ devices including MacBook, iMac, iPad, iPhone 11–17, Samsung Galaxy, Google Pixel, and major Windows laptops
  • Crosshair guidelines — full-screen crosshair lines that follow your cursor, with persistent click markers
  • Dark and light mode — toggle between themes; default matches system preference
  • No installation — runs entirely in your browser; works on Chrome, Firefox, Safari, and Edge
  • Mobile support — works on smartphones and tablets; touch-compatible controls
  • Free and private — no sign-up, no data sent to any server, no tracking beyond optional analytics

Frequently Asked Questions

How accurate is the Online Ruler?

After calibrating your screen, measurements are accurate to within ±1 mm for most displays. Accuracy depends on how precisely you calibrate — the credit card method is typically the most accurate since it uses a physical reference with known ISO dimensions (85.6 × 54 mm).

Why are my measurements in cm off without calibration?

The browser has no way to know your screen's physical size, so it defaults to 96 PPI — the CSS reference value defined by the W3C. Modern HiDPI screens (like MacBook Retina displays at 220+ PPI) are much denser, so 96 PPI underestimates actual physical size. Calibrating fixes this.

What is PPI and why does it matter?

PPI (pixels per inch) describes how many pixels fit in one physical inch of screen. A 4K monitor has many more pixels per inch than a 1080p monitor of the same size, making each CSS pixel physically smaller. The ruler needs your screen's PPI to convert "how many pixels" into "how many centimeters."

Can I use the ruler on a phone or tablet?

Yes. The ruler works on modern mobile browsers. For the most accurate results, select your device from the device lookup in the calibration panel — it will load the correct PPI for your model.

How do I measure the width of an object?

Enable the top or bottom ruler edge, then hold your object flat against the screen with one edge at the zero mark. The tick mark nearest the other end of the object shows the measurement. For thin or lightweight items, the left and right edges work well too.

Can I place multiple measurement markers on screen?

Yes. Enable the crosshair guidelines from the controls panel, then click anywhere on the screen to place a persistent positional marker showing exact coordinates. You can place multiple markers. Press Escape to clear all markers at once.

Does the ruler work offline?

Once the page has loaded, the ruler's canvas rendering and all measurement logic run entirely in your browser with no network dependency. Reloading without internet requires the page to already be cached.

Is the Online Ruler free?

Yes — completely free, no sign-up, no download, no watermarks. Open the URL and start measuring immediately.