On-Screen Pixel Ruler

Measure distances in pixels, centimeters, or inches. Drag to measure, add guidelines, and calibrate to your screen DPI.

Drag inside the ruler area to measure a region. Click rulers to add guidelines at that position.
Drag anywhere in the ruler area to measure a distance.

How to Use the On-Screen Pixel Ruler

  1. Select your unit — choose between px (CSS pixels), cm (centimeters), or in (inches) using the Unit dropdown. Centimeter and inch measurements require accurate DPI calibration.
  2. Set your DPI — for pixel measurements the DPI setting does not matter. For cm/inch measurements, enter your monitor's DPI. Standard monitors are 96 DPI; MacBook Retina displays are 144–220 DPI; 4K monitors are 160+ DPI depending on screen size.
  3. Drag to measure — click and drag anywhere in the ruler area to draw a measurement rectangle. The status bar shows the width and height in real time.
  4. Add guidelines — click "+ H Guideline" or "+ V Guideline" to add a reference line at a fixed position. Use the ruler tick marks to position them precisely. Remove guidelines by clicking the red dot on each one.
  5. Adjust zoom — use the Zoom dropdown to scale the ruler canvas, allowing you to measure very small or very large distances more easily.

What This Tool Measures

The pixel ruler measures distances in CSS pixels — the same unit used in all web CSS measurements. A CSS pixel is defined as 1/96th of an inch at 100% zoom. On standard monitors at normal zoom, one CSS pixel equals one physical pixel on screen. On high-DPI (Retina) displays, one CSS pixel maps to 2 or 3 physical pixels, which makes text and graphics look sharper but does not change the CSS pixel count.

Understanding DPI and Screen Resolution

DPI (dots per inch) is the number of physical pixels per inch on your display. A standard 24-inch 1920×1080 monitor has about 92 DPI. A 15-inch MacBook Pro Retina has a native resolution of 2880×1800, giving it about 220 DPI. Windows and macOS apply scaling factors so that UI elements are the same physical size regardless of DPI — a 96 DPI logical setting on a 220 DPI Retina display means the OS renders at 2.3× scale. For accurate real-world measurements (centimeters or inches), enter your display's true DPI, not the logical DPI reported by the OS.

Finding Your Screen's DPI

  • Windows: Settings → System → Display → scroll to "More display settings" → check resolution and screen size, then calculate DPI = diagonal_pixels / diagonal_inches
  • macOS: Apple menu → About This Mac → Displays — look for "Retina display" indication and check resolution in System Preferences → Displays
  • Online tools: Search "what is my screen DPI" — several sites can auto-detect it based on your user agent and display info
  • Common values: 1080p 24" ≈ 92 DPI, 1080p 27" ≈ 82 DPI, 4K 27" ≈ 163 DPI, MacBook 15" Retina ≈ 220 DPI

Using Guidelines for Layout Alignment

Guidelines are fixed horizontal or vertical reference lines used to check alignment of multiple elements. In this ruler tool, you can add guidelines at specific pixel positions and use them as reference points while measuring other elements. This is especially useful when comparing the spacing between UI elements — place a guideline at a padding boundary, then measure from that guideline to the next element to verify your CSS is producing the correct spacing. For more advanced layout debugging, use browser DevTools alongside this ruler.

Responsive Design and Breakpoints

Web designers commonly need to verify that elements are correctly sized at specific breakpoints. Common CSS breakpoints are 320px (small mobile), 390px (iPhone 14), 768px (tablet), 1024px (small desktop), and 1280px/1440px (standard desktop). Zoom the ruler canvas to a specific breakpoint width to visualize the available layout space. Our responsive breakpoints are directly tied to the CSS pixel unit — not physical pixels — so measuring in px gives you the exact values you need for your CSS media queries.

When to Use a Pixel Ruler

Use a pixel ruler when you need to verify that a design implementation matches the specification. Common scenarios include: checking that padding and margin values match a Figma or Sketch design file; verifying button sizes meet minimum touch target requirements (44×44px per Apple HIG, 48×48dp per Google Material); confirming that a banner is exactly 728×90px (leaderboard) or 300×250px (medium rectangle) per IAB ad standards; and measuring screenshots to extract dimensions for bug reports. The pixel ruler complements browser DevTools — DevTools shows you the CSS box model, while a ruler lets you measure things that aren't easily inspectable.

Frequently Asked Questions

A pixel ruler is an on-screen tool that lets you measure distances in pixels (and converted units like cm or inches) directly on your display. Designers and developers use pixel rulers to check spacing, measure UI elements, verify responsive breakpoints, and ensure layouts match design specs without leaving the browser.
Enter your screen's DPI in the DPI field. You can find your screen's DPI in your OS display settings. For Windows: Settings > System > Display > Advanced display settings. For macOS: About This Mac > Displays. Standard 1080p monitors are typically 92–96 DPI; Retina/4K displays are often 144–220 DPI.
A CSS pixel (logical pixel) is 1/96th of an inch at normal zoom. On high-DPI displays, one CSS pixel maps to 2 or more physical pixels — that is the device pixel ratio (DPR). This tool measures in CSS pixels by default, which is what matters for web layout. Multiply by your DPR to get physical pixel counts.
Click and drag anywhere inside the ruler canvas to draw a measurement rectangle. The width and height are shown in real time in the status bar. Release the mouse to finalize the measurement. The overlay box remains visible until you click Clear Measurement.
Click "+ H Guideline" to add a horizontal reference line at the vertical center of the canvas, or "+ V Guideline" for a vertical line. Each guideline shows a small red remove button. Click it to delete the guideline. Use guidelines to align measurements to a fixed reference point on the canvas.