Click & Drag to Measure
Click anywhere in the ruler area and drag diagonally to draw a measurement box. Release to lock the measurement. Use the history panel to recall previous measurements.
Screen Ruler
Measure elements on screen with pixel precision. Draw a selection box to measure width, height and more.
Common Sizes Reference
| Name | Width | Height | Note |
|---|---|---|---|
| Mobile S | 320px | — | iPhone SE |
| Mobile M | 375px | — | iPhone 12/13 |
| Mobile L | 414px | — | iPhone Plus |
| Tablet | 768px | — | iPad portrait |
| Laptop | 1024px | — | Small laptop |
| Desktop | 1280px | — | Standard desktop |
| Full HD | 1920px | 1080px | 1080p monitor |
| 4K | 3840px | 2160px | UHD monitor |
| Favicon | 16px | 16px | Browser favicon |
| Touch target | 44px | 44px | WCAG min touch |
| OG Image | 1200px | 630px | Open Graph / Twitter |
| Banner | 728px | 90px | Leaderboard ad |
Tips for Using the Ruler
Switch Units Instantly
Toggle between px, rem (base 16px), cm (96 DPI) and vw (viewport-relative) without re-measuring. The all-units breakdown panel shows all four at once for quick comparison.
Use Guide Lines
Enable the guide crosshair to see precise cursor coordinates as you hover. Guides update in real time, making it easy to align measurements to specific pixels.
What is Screen Ruler?
Screen Ruler is a precision measurement tool for designers and developers that lets you measure distances and element sizes directly on your screen. You drag a ruler overlay across any part of your browser window and read off the distance in your choice of unit: pixels, rem, centimetres, or viewport units (vw and vh). This removes the need to open DevTools, inspect computed styles, or take a screenshot and measure it in an image editor.
Pixel-perfect measurement matters in several common workflows. A designer reviewing a developer's implementation wants to confirm that padding, margins, and component dimensions match the design specification. A developer debugging a layout issue needs to know whether a gap is 16px or 20px to understand which CSS rule is responsible. An accessibility reviewer checking button click targets needs to verify they meet the 44 x 44 CSS pixel minimum recommended by WCAG 2.1 Success Criterion 2.5.5.
Unit conversion is built directly into the ruler. Because rem units are relative to the document root font size (typically 16px), converting a pixel measurement to rem tells you the right value to use in a design token or a CSS rule that needs to scale with user font size preferences. Centimetre measurements are useful when designing for print-adjacent contexts or verifying physical display dimensions.
The ruler works entirely in your browser without any browser extension installation. It overlays on top of the current page content so you can measure real rendered output rather than theoretical values from a design file.
How to Use Screen Ruler
- Position the ruler
Click and drag the ruler overlay to align its start point with one edge of the element you want to measure.
- Choose your unit
Select px, rem, cm, vw, or vh from the unit switcher to see the measurement in your preferred unit.
- Read the measurement
The distance between the ruler endpoints is displayed prominently alongside converted values in all supported units.
- Copy the value
Copy the measurement in your chosen unit to paste directly into your CSS, design spec, or bug report.
Key Benefits
Multi-unit display
See measurements in px, rem, cm, vw, and vh simultaneously so you can use whichever unit fits your current CSS or design context.
No extension needed
The ruler runs directly in the browser tab as a page overlay — nothing to install, nothing to configure.
Design review ready
Measure rendered output, not design-file dimensions, so discrepancies between design and implementation are immediately visible.
Works on any page
Measure elements on the current page without leaving it or taking screenshots, making design QA faster and more accurate.
Frequently Asked Questions
1 rem equals the root font size of the page, which is 16px by default in most browsers. If the user has changed their browser font size, 1 rem will reflect that change.
The ruler tool measures within the Altairys page environment. To measure elements on an external site, use the browser's built-in DevTools or a browser extension ruler.
Centimetre measurements are calculated from the screen's reported DPI. Accuracy depends on whether the operating system reports the correct DPI for your specific display.
The ruler measures horizontal and vertical distances. For diagonal measurements, use the Pythagorean theorem with the two axis values, or use a dedicated design tool like Figma.