How to read the ruler

Meet the four units

Switch units anytime from the toolbar or with the 1–4 keys. The tick marks are redrawn from your calibration, so switching never changes the physical size — only the labels.

• cm (1) — centimeters, the everyday metric unit. Best for general measuring.
• mm (2) — millimeters, for precision. Same scale as cm, labeled in mm.
• in (3) — inches with fractional ticks down to 1/16″. Best for US customary work.
• px (4) — CSS pixels, for design mockups. Not a physical unit (see below).

Reading centimeters and millimeters

In cm mode, the long numbered ticks are centimeters (1, 2, 3…) and there are nine short ticks between each pair — those are millimeters. An object ending four short ticks past the 5 cm mark is 5.4 cm long. In mm mode the scale is identical but the numbered ticks read 10, 20, 30 — so that same object reads 54 mm directly, no multiplying.

The practical rule: use cm when the number of centimeters is what you care about (“about twelve and a half centimeters”), and mm when you want a single precise number (“127 mm”).

Reading inches and fractions

In in mode, numbered ticks are whole inches. Between them, tick length tells you the fraction — longer means a simpler fraction:

Tick length	Fraction	Example
Longest unnumbered	½ inch	2½″
Next longest	¼ inch	1¼″, 1¾″
Medium	⅛ inch	3⅜″
Shortest	1/16 inch	5/16″

To read a measurement, find the nearest numbered inch below the object’s end, then count the small ticks past it and take the longest tick your count reaches. Three of the shortest ticks past the 2″ mark is 2 and 3/16 inches. If the object’s end lands exactly on a medium tick, read the eighths instead — 2 and 6/16 is really 2⅜″, and woodworkers will thank you for simplifying.

Reading pixels

px mode is the odd one out: a CSS pixel is not a physical size, it’s the browser’s own unit. The px ruler shows 10-pixel minor ticks and numbered marks every 100 px. Use it when you’re mocking up a design (“this button should be about 120 px wide”), not when you need a physical measurement — for that, stay in cm, mm, or inches after calibrating.

Measuring with guides

Press G (or the Guides button) and click anywhere in the measuring area to drop a guide line — horizontal or vertical, chosen with the H/V selector. Each guide shows its position in the current unit. Drag a guide to reposition it, double-click to remove one, and press Esc to clear them all.

Guides shine when the object can’t sit against a ruler’s edge: drop one guide at each end of the object and subtract the two readouts. The guides always report in the active unit, so switching units mid-measurement converts the readouts for you.

Measuring with the crosshair

Press C and a dashed crosshair follows your pointer across the measuring area, with a live badge showing the exact X/Y position in the current unit. It’s the fastest way to check a single point — the corner of a photo, the edge of a widget — without dropping guides.

Advanced tools

The toolbar’s Advanced row adds six tools that go beyond the edge rulers. All of them measure in CSS pixels scaled by your calibration, in the currently selected unit.

• Measure (M) — drag anywhere on the canvas to draw a measurement line. The live readout shows the distance in the current unit and the line’s angle in degrees. Endpoints snap to nearby guide lines. Release to get Save (sends the reading to the log) or Discard; Esc cancels while drawing.
• Protractor (P) — a circular protractor you can drag anywhere. Drag the center to move it, the ring handle to rotate the scale, and the two arm handles to set the arms; the digital readout shows the angle between the arms in degrees.
• Loupe (L) — a 3× magnifier that follows your cursor, showing a zoomed view of the rulers, guides, and canvas beneath it for precise tick reading.
• Ruler (R) — a floating ruler, independent of the screen edges. Drag its body to move it and the amber handle at its end to rotate it to any angle; it renders ticks in the current unit along its length, with a small badge showing its rotation.
• Log (O) — every saved measurement lands here with an editable label. Copy a single entry or the whole list, export as CSV or TXT, or delete entries. The log persists in your browser’s local storage.
• Grid (N) — a subtle overlay grid for alignment work. Each cell is exactly 1 cm (or 1 inch — switch with the Grid unit selector), with a stronger line every 5 cells.

Keyboard shortcuts

Press H anywhere in the ruler app to open the shortcut reference. The full map:

• 1–4 — units: cm, in, mm, px
• G guides · C crosshair · F fullscreen · D theme
• M drag-to-measure · P protractor · L loupe
• R floating ruler · O measurement log · N grid
• Esc — cancel the current drawing, close dialogs, or clear all guides

Tips for trustworthy measurements

• Measure against the ruler’s highlighted measuring edge (the teal baseline), not the outer edge of the bar.
• Line up the object’s start with the zero mark, not with the end of the screen.
• For objects longer than the ruler, measure in sections with guides marking each segment.
• View the screen straight on; at a steep angle, parallax shifts where the edge appears to be.
• Every tool measures in CSS pixels scaled by your calibration. Browser zoom, OS display scaling, or an external monitor with a different pixel density will rescale the ruler — keep zoom at 100% and recalibrate if you move the window to another display.
• When in doubt, re-check with the credit-card calibration — it takes a minute.