Screen Ruler
Measure anything on your screen with professional sub-pixel precision.
Select Units
Calibration (DPI)
Frequently Asked Questions
Is this ruler browser-accurate?expand_more
How do I measure outside the browser?expand_more
What is DPI/PPI and why does it matter?expand_more
Measuring What's Actually on Screen
What gets measured
When the spec says one thing and your eye suspects another:
| Measurement | Catches |
|---|---|
| Element widths and heights | The button that's 38px in one place, 40px in another |
| Spacing between elements | Inconsistent gaps a design system should prevent |
| Implemented vs. designed | QA-ing a build against the mockup |
| Competitor layout dimensions | How wide is their content column, really |
| Image sizes before download | What resolution that asset actually displays at |
CSS pixels vs. screen pixels
On a retina/high-DPI display, one CSS pixel is rendered by multiple physical pixels — so a screenshot measured in an image editor shows numbers 2–3× larger than the CSS values. An on-screen ruler measures in CSS pixels, the unit your stylesheet speaks, which is exactly why it beats the screenshot-and-zoom routine for layout debugging. Browser zoom also scales measurements — check it's at 100% before trusting a reading.
Companion checks
Dimensions pair with shape math in the aspect ratio calculator (measure one side, derive the other), colors get picked rather than guessed via the screen color picker, and once measured values head into the stylesheet, the px to rem converter keeps the units accessible.