Online ruler

Calibrate it once against a bank card and measure at true size, with the area and perimeter of any rectangle you draw.

Calibrate once

Not calibrated

A screen does not know its own size, so the ruler has to be taught. Pick a method; it is remembered in this browser.

Working out which screen you have…

This recognises a model rather than measuring one: the card is still the exact method.

Your screen matches what the browser assumes. Pixels per millimetre: 3.780

Drag across the area to measure a distance.

Unit

Nothing drawn yet

The ruler measures what is on the screen, not what is behind the glass: it cannot measure through it.

Generated right here, in your browser. What you type never leaves your device.

Keep going with Online protractor Printable paper Printer test page Monitor calibration

A screen has no idea how big it is. It knows how many pixels it has, and it knows the ratio the operating system asked it to draw at, but the actual distance between two dots of glass is not a number any browser can look up. That is the whole problem an on-screen ruler has to solve, and it is why a ruler you have not calibrated is decoration rather than a measuring instrument.

This one asks you to teach it, once, and then remembers. Hold a bank card against the rectangle and drag until the edges agree, or type in the diagonal size your monitor was sold as. From that moment the centimetre on screen is a centimetre, and it stays that way on your next visit because the calibration is stored in your browser.

Beyond the rule itself there is a rectangle tool. Drag a box around something and it reports width, height, area, perimeter and diagonal at once — the numbers you actually wanted when you went looking for a ruler, rather than a scale you then have to read off by eye and multiply in your head.

Manual

How to use it

1
Let it try first

It looks at the resolution and pixel ratio your browser reports and checks them against a table of known screens. Where that identifies one device it calibrates itself and says which; where several sizes share a resolution it lists them rather than guessing. That is recognition, not measurement, so it is a good starting point rather than the last word.
2
Or find a bank card

Any credit card, debit card or national ID card of the usual shape. They are all the same size to within a tenth of a millimetre, which is what makes one a better reference than a printed ruler you would have to hold flat against the glass.
3
Match the rectangle to it

Lay the card on the screen over the grey rectangle and drag the slider until the two line up on all four sides. Get the width right and the height follows; the proportions are fixed.
4
Or type in your screen size

If no card is to hand, open Manual and either pick your model from the list or enter the diagonal your screen is sold as — 14 for a 14-inch laptop, 27 for a 27-inch monitor. It is less exact than the card, because the advertised size is rounded, but it is close.
5
Pick your unit

Centimetres, millimetres, inches or pixels. The inch rule divides into sixteenths, the way a real one does; the metric rule divides into millimetres. Pixels need no calibration at all, since that is the unit the screen is drawn in.
6
Measure by dragging

With the measure tool, drag from one point to another and read the distance. It works diagonally, not only along the edges, so you can measure something at an angle without any arithmetic.
7
Take the whole screen

The fullscreen button in the toolbar gives the ruler the entire display, which is the difference between measuring 19 cm and measuring 30. Escape brings it back.
8
Or draw a rectangle

Switch to the rectangle tool and drag a box. Each side carries its own length, the diagonal is written along its dotted line, and area and perimeter sit in the middle. When a figure is too small to hold the numbers they step outside it rather than disappear. Dotted guides drop from every edge to the rules, and there is a rule on all four sides, so a reading can be taken from whichever edge is nearer.
9
Draw as many as you need

Figures stay where you put them, so you can lay several over the same thing and compare. Drag any one to move it, click it to select it, and either press Delete or use the toolbar to remove it — or clear the lot at once. The lock button freezes them all, which is what you want once the arrangement is right and you are only reading it.
10
Or a circle

The circle tool drags outwards from the centre, so what you drag is the radius. It reports radius, diameter, area and circumference — the last of which is just the perimeter under the name a circle deserves.

In depth

Things worth keeping in mind

What it can and cannot measure

The ruler measures things laid against the screen, or things drawn on it. It cannot measure through the glass at something behind, and it cannot measure a photograph unless you know the scale the photograph was taken at.

Good for: anything flat you can hold against the display — a cable end, a screw, a photo print, a swatch, a component on a board.
Good for: anything already on the screen at 100% zoom, which is what the pixel unit is there for.
Not for: measuring at a distance, or through the screen. There is no depth information anywhere in this.
Not for: anything thicker than a few millimetres. Parallax between the object and the glass grows quickly, and a thick object will read short.
Careful with: browser zoom. Zooming after calibrating changes the scale, because the calibration is stored in CSS pixels and zoom changes what those are worth.

How accurate this really is

Calibrated against a card, on a screen at 100% zoom, expect to be within about half a millimetre over a 10 cm span. Most of the error is in how well you judged the card edges against the rectangle, not in the arithmetic.

The card method is the more accurate of the two, because the reference is manufactured to a tenth of a millimetre.
The diagonal method inherits whatever rounding the manufacturer applied. A monitor sold as 27 inches is often 27.0 exactly, but a laptop sold as 15.6 might be 15.61 or 15.55.
Longer spans are proportionally better. Measuring 100 mm carries the same absolute error as measuring 10 mm, so it is a tenth of the relative error.
Nothing here is traceable. For anything where being wrong has consequences, use a physical rule that somebody certified.

History

Where the units came from

The metre was defined in 1791 by the French Academy of Sciences as one ten-millionth of the distance from the North Pole to the equator along the meridian through Paris. Two astronomers, Delambre and Méchain, spent seven years surveying the arc between Dunkirk and Barcelona to pin it down, working through the Revolution and being arrested more than once for pointing instruments at things from church towers. Their answer was slightly wrong — the Earth is flatter than they could measure — but the bar cast from it became the standard anyway.

The inch went the other way, from the body outward. It was a thumb width, then three barleycorns laid end to end, and it varied from town to town for centuries. It was only fixed exactly in 1959, when the United States, the United Kingdom, Canada, Australia, New Zealand and South Africa agreed that the international inch would be precisely 25.4 millimetres. The inch is now defined by the metre, which is a quiet ending to a long argument.

The metre itself has been redefined three times since the survey. A platinum bar in 1799, a wavelength of krypton-86 light in 1960, and since 1983 the distance light travels in a vacuum in 1/299,792,458 of a second. That last one is circular on purpose: the speed of light was fixed by definition, so the metre is now derived from a constant of nature rather than from an object anyone can lose.

Which is the irony of an on-screen ruler. The unit is defined against the speed of light to a precision beyond any laboratory need, and the practical problem is still that your monitor will not tell a web page how wide it is.

1791: the metre defined from a meridian
25.4: millimetres in an inch, exactly, since 1959
85.60: millimetres wide: an ISO/IEC 7810 ID-1 card
96: pixels CSS calls an inch, whatever the screen

How it works

Why a browser cannot just ask the screen

CSS defines an inch as exactly 96 pixels. Not approximately, not on typical hardware — by definition, in the specification. That number was chosen in the 1990s because it matched the displays of the day, and it was frozen so that a page laid out in inches would not reflow when screens changed. The consequence is that `1in` in CSS is a unit of layout, not a unit of length, and a ruler that trusts it will be wrong on every display denser than a 1996 CRT.

`window.devicePixelRatio` does not rescue this. It reports the ratio between CSS pixels and device pixels, which tells you how sharp the screen is relative to the CSS assumption, not how large the pixels are. A phone at 3× and a desktop at 3× can have wildly different physical pixel sizes. There is no browser API that returns physical dimensions, and there is a good privacy reason for that: exact panel dimensions would be another value to fingerprint you with.

So the only route is a reference object whose real size is already known. That is what the calibration step is: you supply the missing constant by matching something physical, the tool divides the pixels it drew by the millimetres you say they represent, and stores the resulting pixels-per-millimetre. Every measurement afterwards is that one number applied to a pixel distance.

The bank card is the reference because of ISO/IEC 7810, the standard that defines identification card sizes. Its ID-1 format is 85.60 by 53.98 millimetres, with a tolerance measured in hundredths, and it is the format used by essentially every payment card on earth. You almost certainly have a precisely manufactured measuring reference in your pocket right now.

By hand

Working out your own screen density

The tool does this for you, but the calculation is short enough to do on paper, and once you have done it you will never again be surprised that two screens of the same resolution look different sizes.

1

The resolution your display is running at — 1920 × 1080, 2560 × 1440, whatever the settings say. Use the real panel resolution, not a scaled one.
2

Pythagoras: square the width, square the height, add them, take the square root. For 1920 × 1080 that is √(1920² + 1080²) ≈ 2203 pixels.
3

A 24-inch monitor: 2203 ÷ 24 ≈ 91.8 pixels per inch. That is your real density, and it is nowhere near the 96 that CSS assumes.
4

Divide by 25.4, the number of millimetres in an inch. 91.8 ÷ 25.4 ≈ 3.61 pixels per millimetre. Multiply any pixel distance by that and you have millimetres.
5

A card should come out 85.6 × 3.61 ≈ 309 pixels wide. If your calibrated slider landed somewhere near that, both methods agree and the ruler is sound.

Diagnosis

If something is not working

Symptom:It says my screen is a device I do not own

Likely cause:: The automatic method matches a resolution to a table, and several unrelated screens can report the same one — particularly laptops at a non-default display scaling.
What to do:: Open the Manual tab and pick the right device, or type the diagonal your screen is sold as. The card overrides either. Whatever you set by hand is what is stored.

Symptom:The ruler reads shorter or longer than my real ruler

Likely cause:: Either it has not been calibrated on this device, or the browser zoom has changed since it was.
What to do:: Press Ctrl+0 (Cmd+0 on a Mac) to return the page to 100%, then calibrate again with the card. Zoom scales the CSS pixel, which is the unit the calibration is stored in.

Symptom:The card never quite lines up on all four sides

Likely cause:: You are matching the width and the height is following the fixed proportion, so a mismatch means the card is not sitting square against the glass.
What to do:: Line the card up with the left edge of the rectangle first and keep it parallel, then adjust until the right edge agrees. Ignore the bottom edge while you do it.

Symptom:It was calibrated yesterday and is wrong today

Likely cause:: The calibration is stored per browser. A different browser, a private window, or a second monitor of a different size will all measure differently.
What to do:: Recalibrate on the screen you are actually using. If you move a laptop between an internal display and an external monitor, expect to redo it each time.

Symptom:Thick objects read smaller than they are

Likely cause:: Parallax. Your eye is looking at the object from an angle, and the object sits a few millimetres above the glass where the scale is drawn.
What to do:: Look straight down at the screen rather than from an angle, and lay the object as flat as it will go. For anything more than a few millimetres thick, use a physical rule.

Symptom:Nothing happens when I drag on a phone

Likely cause:: A touch gesture that started as a scroll will not be handed to the drawing area.
What to do:: Start the drag inside the measuring area rather than on its edge, and press briefly before moving. If the page scrolls instead, scroll so the whole area is visible first.

Trivia

Things worth knowing

Your wallet holds a metrology standard

ISO/IEC 7810 fixes the ID-1 card at 85.60 × 53.98 mm with a tolerance of about 0.1 mm, and the corner radius at 3.18 mm. Payment cards, most driving licences and many national ID cards all conform, which makes them the most widely distributed precision-manufactured objects in the world.

The 96-pixel inch is older than most people using it

It comes from Microsoft choosing 96 dpi as the Windows logical resolution in the early 1990s, partly so that a 10-point font would render legibly on the monitors of the day. CSS adopted it, and it has been frozen ever since because unfreezing it would reflow every page on the web.

The metre was measured through a revolution

Delambre and Méchain surveyed the Dunkirk–Barcelona meridian arc from 1792 to 1799. Méchain found an inconsistency in his own readings at Barcelona, never resolved it, and concealed it until his death — an error later traced to the Earth being less regular than the survey assumed.

A pixel is not square everywhere

Most modern panels have square pixels, but subpixel layouts differ: standard RGB stripe, BGR on some panels, and PenTile on many OLED phones, where the subpixels are shared between neighbours. It does not affect distance measurement, but it is why text can look differently sharp on two screens of identical resolution.

Paper sizes are built on a square root

A4 is 210 × 297 mm because the ISO 216 series fixes the ratio at √2, so halving a sheet along its long edge gives the next size down with the same proportions. A0 is exactly one square metre. Measure an A4 sheet with a calibrated ruler and you can check both claims yourself.

Questions

Frequently asked questions

How does it know what screen I have?

It does not, strictly. It multiplies the reported resolution by the pixel ratio to get the panel’s own resolution — which does not change when you change the scaling — and looks that up in a table of known screens. Where only one screen has it, the model is named. Where several do, as with 1920×1080, it applies the likeliest and lists the rest, leaning on the fact that an operating system only scales past 100% for a laptop panel and not for a desk monitor.

It picked the wrong device. Does that matter?

Yes, and it is easy to fix: choose the right one under Manual, or switch to the card, which overrides both. A calibration you set yourself is never replaced by the automatic guess on a later visit.

Why do I have to calibrate it at all?

Because no browser API reports the physical size of a screen. CSS defines an inch as 96 pixels regardless of the hardware, so without a reference object the tool has no way to know whether your pixels are large or small. Calibrating supplies the one number it cannot look up.

Is the calibration saved?

Yes, in your browser, on this device. It is not sent anywhere and it is not tied to an account, because there are no accounts. Clearing your site data or using a private window will lose it.

Can I use something other than a bank card?

Any object whose exact size you know will work if you can match it against a known length, but the card is recommended because ISO/IEC 7810 makes its size predictable to a tenth of a millimetre. A coin works in principle, though denominations differ by country.

How do I measure area and perimeter?

Switch to the rectangle or circle tool and drag. Area and perimeter are written on the figure itself as you draw, and the full set of numbers appears underneath. Millimetre areas are reported in square centimetres, because square millimetres produce numbers nobody can picture.

It tells me my screen is 30 by 20 cm. Is that right?

It is whatever the calibration implies, which is the point of showing it: the figure is checkable in ten seconds with a tape against the bezel. If the number is wrong, the calibration is wrong, and the ruler is wrong by the same proportion — so it is the fastest way to catch a bad calibration before you trust a measurement.

What are the dotted lines for?

Two things. The one across a rectangle is its diagonal, drawn dotted so it does not read as a side. The ones running to the top and left edges drop from the figure to the rules, so you can read its position off the scales instead of estimating where it lands.

Does it work on a phone or tablet?

Yes. The drawing area uses pointer events, so touch works the same way a mouse does. Calibrate with the card exactly as you would on a desktop; a phone screen is dense enough that the card method is quite precise.

Why does the inch ruler divide into sixteenths?

Because that is how an imperial rule is divided. Halves, quarters, eighths, sixteenths — repeated halving rather than tenths. A decimal inch ruler exists for engineering work, but it is not what anyone reaching for an inch rule expects.

Is it accurate enough for real work?

For checking whether a part fits, sizing a print, or measuring something small and flat, comfortably. For anything with consequences — a legal dimension, a machined tolerance, anything you cannot redo — use a physical rule that somebody certified. Nothing here is traceable to a standard.

Does anything I measure leave my device?

No. The whole tool runs in the page. There is no upload, no server call and no account; the only thing stored is the calibration number, and it stays in your browser.

Calibrate once

How to use it

Let it try first

Or find a bank card

Match the rectangle to it

Or type in your screen size

Pick your unit

Measure by dragging

Take the whole screen

Or draw a rectangle

Draw as many as you need

Or a circle