Current scale: 96 pixels per inch
Calibrate Your Screen
Place a standard credit card (3.375 inches / 85.6 mm wide) flat against your screen. Drag the slider until the highlighted bar below matches the card's width exactly.
How to Measure Things on Your Screen
Whether you are a designer checking the physical size of a UI element, a student measuring a diagram, or someone who simply needs a quick ruler and does not have one nearby, an on-screen ruler can be remarkably useful. This free tool turns your monitor, laptop display, or tablet into a calibrated measuring device that shows both inches and centimeters — no downloads, no sign-ups, and no ads required.
Why Screen Rulers Matter
Physical rulers are great when you have one on hand, but digital work increasingly happens in contexts where quick measurements are needed and a physical tool is not available. A screen ruler lets you hold up a printed business card, a photograph, a piece of hardware, or a component and read its dimensions in real time. It is also useful for checking whether print-ready designs appear at the correct size before committing to paper and ink.
Understanding DPI and PPI
DPI (dots per inch) and PPI (pixels per inch) describe how many individual dots or pixels fit into one linear inch of a display or printout. Most operating systems assume a default value of 96 PPI, but the actual physical pixel density of your screen depends on its resolution and physical size. A 27-inch 4K monitor has roughly 163 PPI, while a 13-inch laptop at 1920×1080 is closer to 166 PPI. Because the operating system's assumed value rarely matches reality, an uncalibrated screen ruler will be inaccurate — sometimes by a wide margin.
Why Calibration Is Important
Calibration bridges the gap between what the operating system thinks a pixel represents and what it actually measures on your specific screen. This ruler includes a simple calibration step: place a standard credit card (3.375 inches or 85.6 mm wide — an ISO standard dimension shared by virtually all bank cards, ID cards, and loyalty cards) flat against the display and drag a slider until the on-screen reference bar matches the card exactly. Once calibrated, every inch and centimeter on the ruler corresponds to true physical dimensions on your screen. Calibration is stored in your browser, so you only need to do it once per device.
How This Tool Works
The ruler is rendered on an HTML5 canvas element using your calibrated PPI value. When set to inches, it draws whole-inch labels, half-inch marks, quarter-inch marks, and eighth-inch tick marks — the same gradations found on a standard physical ruler. When set to centimeters, it draws labeled whole-centimeter marks and millimeter ticks. The ruler extends at least 10 inches (25 cm) and can be scrolled horizontally if it extends beyond your viewport. Everything runs entirely in your browser with no server communication.
Common Use Cases
- UI and graphic design — Verify that icons, buttons, and images meet physical size specifications before production.
- Print preparation — Confirm that a design looks correct at its intended print dimensions on screen before sending it to the printer.
- Quick measurements — Measure small objects like screws, coins, jewelry, or electronic components without reaching for a physical ruler.
- Education — Teach students about the metric and imperial measurement systems, unit conversions, and the concept of screen resolution.
- Remote collaboration — Share calibrated measurements with colleagues who need to verify physical sizes during video calls or screen-sharing sessions.
Frequently Asked Questions
How accurate is an online ruler?
Accuracy depends entirely on calibration. Without calibration, an on-screen ruler may be off by 10–30 % because operating systems assume a default PPI that rarely matches the actual physical pixel density of your monitor. After calibrating with a credit card or other known-width object, the ruler is typically accurate to within one or two millimeters — more than sufficient for everyday measurements. For sub-millimeter precision, a dedicated physical measuring tool is recommended.
Why do screen rulers need calibration?
Every display has a different combination of resolution and physical size, which means the number of pixels per physical inch varies from screen to screen. A CSS "inch" is defined as exactly 96 pixels regardless of actual hardware, so browsers have no built-in way to know the true physical size of a pixel. Calibration lets the ruler compensate for this discrepancy by measuring a known physical object and adjusting the scale accordingly.
What is PPI?
PPI stands for pixels per inch. It describes the pixel density of a display — how many individual pixels are packed into one linear inch of screen real estate. Higher PPI means sharper images and text. Common PPI values range from about 90 (older desktop monitors) to over 400 (high-end smartphones). Knowing your screen's true PPI is essential for any tool that needs to display real-world measurements accurately.
Do I need to recalibrate on a different monitor?
Yes. Each monitor has its own PPI, so calibration values are specific to a particular display. If you move your laptop to an external monitor or use a different device, recalibrate the ruler for accurate results. The calibration value is saved in your browser's local storage, so it persists between visits on the same device.
This screen ruler is completely free, runs entirely in your browser, and requires no installation. Calibrate once, measure as often as you need — in inches or centimeters, on any screen, from any device with a modern web browser.