Online Pixel and Centimeter Ruler

Fast, accurate and free online linijka online piksele cm tool running directly in your browser.

Secure (SSL)

Client-Side Processing

100% Free

Go to tool

Instructions

1

Enter data
Enter content, paste text or load a file from disk.
2

Click the button
The tool will immediately process your data in the browser.
3

Get the result
Copy the finished text or save the file to your device.

                                                function runTool() {

                                                  return "Result ready in 0.1s";

                                                }

Settings

Ppi mode

Orientation

Unit

PPI

Scale

Diag in

Res w

Res h

Length cm

Value px

Value cm

Show inches Tool Option

Notes

Result

ppi mode: direct ppi: 96 diag in: 24 res w: 1920 res h: 1080 effective ppi: 96 scale: 100 px per in: 96 px per cm: 37.795275590551 px per mm: 3.7795275590551 length cm: 20 orientation: horizontal unit: cm show inches: 1 value px: 500 value cm: 10 cm from px: 13.229166666667 px from cm: 377.95275590551 notes: Tip: set browser zoom to 100% and adjust the correction factor if needed.

Rate this tool:

Related tools

Other tools you may find useful

Online ruler – measure elements on the screen in px and cm

The online ruler displays pixel and centimeter scales directly in your browser. Once calibrated to your monitor's DPI, it is accurate for physical measurements. Used by designers to check element sizes, spacing and proportions.

online ruler measure pixels cm screen ruler online px online measure in your browser

Ruler calibration

Ruler without calibration: uses window.devicePixelRatio and assumes 96 DPI (CSS standard). For physical accuracy: calibrate by holding a real ruler or credit card (85.6×54mm) to the screen and adjusting. Saved calibration: localStorage – remains after closing the browser.

Ruler units

Pixels (px): CSS units. Physical pixels: px × devicePixelRatio (for Retina 2×: 1 CSS px = 2 physical px). Centimeters (cm): Calculated from DPI calibration. Inches(in): 1in=2.54cm. Typographic points (pt): 1pt = 1/72 inch. Spades (pc): 1pc = 12pt. The tool converts between all of them.

Ruler modes

Horizontal ruler: measure along the X axis. Vertical ruler: along the Y axis. Angle: measure the angle between two lines. Area ruler: Mark a rectangle and measure width × height. Free measurement: click point A and B - distance in px and cm.

Applications

Checking spacing in Figma design vs implementation. Verification of element sizes in production. Measurement of a photo or graphic in pixels. Checking whether the element meets the minimum touch size (48×48px WCAG). DPI comparison on different monitors.

Frequently asked questions

Why is 96 DPI the CSS standard?

In CSS, 1in = 96px (since CSS 2.1). Historically: Windows 96 DPI, macOS 72 DPI (since 1984). Unified in CSS: 1in = 96px regardless of the physical DPI of the monitor. On Retina (192 DPI): 1 CSS px = 2 physical px (devicePixelRatio=2). 4K monitor: can be 3× or 4×.

How to check the DPI of your monitor?

DPI = (width_px / diagonal_in). Monitor 24", 1920×1080: diagonal_px = √(1920²+1080²) ≈ 2203 px. 2203/24 ≈ 91.8 DPI. The tool can automatically calculate the approximate DPI if you enter the monitor diagonal.

How does a ruler help with accessibility?

WCAG 2.5.5 Target Size (AA): interactive elements at least 44×44px.

Will the online replace the ruler physical ruler?

For on-screen measurements (px, design): yes - it is more accurate. For physical measurements (measuring sheets of paper, office objects): no. Accuracy depends on monitor calibration and DPI. devices?

Standard FHD 24" monitor: ~91-92 DPI. MacBook Retina 13": ~227 DPI. iPhone 15 Pro: 460 PPI (PPI = DPI for screens). 4K monitor 27": ~163 DPI. iPad Pro 12.9": 264 PPI. Print: 300 DPI minimum (readable text), 1200 DPI for detailed graphics.

Related tools: em/rem to pixel converter, inches to cm converter and color contrast checker.