Last updated: March 2026
What Is the Online Ruler?
The Online Ruler is a free, real-size ruler that runs in your browser. It displays accurate inch and centimeter markings on your screen, calibrated to your display's actual DPI so that measurements match physical objects you place against the screen.
Over 300,000 people search for "online ruler" every month because they need a quick measurement and don't have a physical ruler nearby. This tool eliminates that problem entirely: open the page, calibrate once, and measure anything from jewelry and screws to printed photos and PCB components.
Unlike physical rulers, this tool also includes a measurement line tool that lets you click-drag to measure distances anywhere on screen, showing results in both inches and centimeters simultaneously. Diagonal measurements also display the angle in degrees.
How to Use the Online Ruler
Step 1: Calibrate your display. The ruler auto-detects your DPI from your browser's device pixel ratio, but for best accuracy click "Calibrate" and use the credit card method. Place a standard credit card flat against your screen and drag the overlay rectangle until it matches perfectly.
Step 2: Choose your units. Toggle between Inches, Centimeters, Both (default), or Millimeters. The ruler shows tick marks at every 1/16 inch on the inch scale and every millimeter on the metric scale.
Step 3: Measure objects. Place an object against your screen and read the markings directly, or use Measure mode to click-drag measurement lines for precise readings.
Step 4: Switch layouts. Use Horizontal for width measurements, Vertical for height, or L-Shape for measuring both dimensions at once.
Key Features
Real-size rendering. The ruler uses your calibrated DPI to render markings at their true physical size. A 1-inch gap on screen equals 1 inch in real life when properly calibrated.
Dual-scale display. Inches on top with markings at every 1/16", centimeters on bottom with millimeter ticks. Major ticks at whole inches and centimeters, medium ticks at 1/2", 1/4", and 5mm, small ticks at 1/8", 1/16", and 1mm.
Multiple ruler orientations. Horizontal fills your screen width, Vertical provides a left-edge ruler for height measurements, and L-Shape combines both into a corner ruler for measuring width and height together.
Measurement line tool. Click Measure, then click-drag to create lines. Each shows length in inches and centimeters. Multiple lines are color-coded across 5 colors. Delete individual lines with the X button.
Print mode. Print a real-size ruler with a 1-inch calibration square for verification. Useful when you need a disposable paper ruler for fieldwork or crafts.
Persistent calibration. Your calibrated DPI is saved in localStorage so you only need to calibrate once per device.
Understanding DPI and Screen Calibration
DPI (dots per inch) describes how many pixels your screen packs into one physical inch. A 24-inch 1080p monitor runs at about 92 DPI, while a 15-inch Retina MacBook Pro runs at about 220 DPI. Knowing your true DPI is essential for an accurate on-screen ruler.
Browsers report a devicePixelRatio that combines hardware DPI with OS-level scaling, but this doesn't directly correspond to physical DPI. A Retina display with 2x scaling reports CSS pixels at half its physical pixel count, making automatic DPI detection approximate at best.
The credit card calibration method bypasses all of this uncertainty. A standard credit card is always 3.375 inches by 2.125 inches (85.6 mm by 53.98 mm) per the ISO/IEC 7810 ID-1 standard. By matching an on-screen rectangle to the physical card, the tool back-calculates your exact DPI.
Frequently Asked Questions
How accurate is the online ruler?
Accuracy depends on your screen's DPI calibration. By default, the ruler estimates DPI from your browser's device pixel ratio, which is often close but not exact. For best accuracy, use the credit card calibration method: place a standard credit card (3.375" x 2.125") on your screen and drag the overlay to match. This gives you sub-millimeter accuracy on most displays. You can also enter your monitor's exact DPI from the manufacturer specs.
How do I calibrate the ruler for my screen?
There are three ways to calibrate: (1) Credit card method - click Calibrate, place a standard credit card on screen, and drag the rectangle's edge until it matches your card perfectly. The ruler recalculates your actual DPI automatically. (2) Direct DPI entry - if you know your monitor's PPI (check manufacturer specs), type it directly into the DPI field. (3) Auto-detect - the default uses window.devicePixelRatio, which works well on most modern displays. Your calibrated DPI is saved in your browser so you don't need to recalibrate each visit.
Can I measure objects on my screen?
Yes. Click the Measure button to enter measurement mode. Then click and drag anywhere on the ruler area to create measurement lines. Each line displays its length in both inches and centimeters. Diagonal lines also show the angle in degrees. You can create multiple lines, each color-coded for easy identification. Click the X button next to any measurement to remove it.
Does the online ruler work on mobile phones and tablets?
Yes. The ruler is fully responsive and fills the width of your screen on mobile devices. Touch-drag works for creating measurement lines. However, mobile screens are smaller so you can only measure objects up to your screen width. For the most accurate mobile calibration, use the credit card method since mobile browsers report device pixel ratios that may not correspond to physical DPI.