Online Ruler in cm and Inches

A free online ruler you can trust

Anyone searching for an online ruler wants the same thing: a number they can act on. That turns out to be the one job a web page cannot do unaided. Browsers lay out in CSS pixels, and the specification pins a CSS pixel at 1/96 of an inch. Real hardware pays no attention. A 27-inch 1440p monitor lands near 109 pixels per inch. A 24-inch 1080p panel sits around 92. A high-density 13-inch laptop can exceed 160. Draw a line labelled 10 cm without accounting for any of that and you can be out by more than half its length.

So this ruler asks you one question first. Hold a bank card flat to the glass and drag the slider until the outline beneath it lines up. That single match tells the tool your display's true pixel density. Payment cards work well for the job because every one of them, anywhere in the world, is built to ISO/IEC 7810 ID-1 at 85.6 mm wide by 53.98 mm tall, and most people have one within reach. Afterwards the readings are genuine actual size ruler measurements rather than estimates, and the value is stored so you never repeat the step on that device.

How to measure on your screen

Start by putting browser zoom back to 100%. Ctrl+0 does it, or Cmd+0 on a Mac. Zoom rescales CSS pixels, which quietly invalidates any calibration you have saved. Then pick a unit and drag across the ruler. The readout follows as you go and always carries the equivalent in the other measuring system, so a cm ruler online doubles as an inch ruler with no switching about. The keyboard works too: focus the ruler and use the arrow keys, holding Shift to jump a whole centimetre or inch at a time.

There are four units. Centimetres and millimetres are graduated like a metric school rule, labelled every centimetre with fine millimetre subdivisions between. Inches run in sixteenths with the familiar stepped tick heights, and the readout adds the nearest fraction beside the decimal, which helps if you are working from imperial drawings. Pixel mode ignores calibration entirely and counts raw screen pixels, which is normally what designers and front-end developers are after.

Length is the obvious limit of any ruler stuck inside a page, and two things push against it. You can dock a ruler to any edge of the display, where it runs the full width or height of the viewport instead of the width of this column. You can also put the tool fullscreen. Dock a horizontal and a vertical ruler together and you get a width and a height in one pass.

What people measure with a virtual ruler

Mostly small things, when no tape measure is nearby. A ring's inner diameter before ordering a size. The width of a screw or a drill bit. A SIM tray, the bezel on a phone case, a photo that has to fit a frame. Sellers check a listing's stated dimensions against it. People who sew and make things use millimetre mode for beads and thread. Students reach for it when a homework diagram needs measuring and the ruler is in a bag somewhere else. The preset buttons cover the objects that come up most: bank card, CD, A4 sheet width, US Letter width. Any of them doubles as a quick check on your calibration.

Some limits are worth stating plainly. Nothing wider than your display can be measured in one pass, so a 15-inch laptop gives you about 33 cm across in landscape. Soft or curved objects are awkward to hold flat against glass. And a calibration belongs to the screen it was made on, so if you move to a different monitor, or change your operating system's display scaling, do it again. Inside those limits a calibrated screen ruler is good to roughly half a millimetre, which beats what most people manage with a tape.

None of this needs an account, a download or an extension. The page is static HTML and CSS with a small amount of JavaScript running on your device. No measurement, image or calibration value is uploaded anywhere. It also means the page loads almost immediately and keeps working offline once it has been cached.