Pixel rulers for any web page

Screen Ruler adds pixel rulers along the top and left edges of the page, with a marker on each that follows your cursor, so you can read positions and line things up.

What the rulers show

Turn on Page Rulers and two strips appear, one across the top of the window and one down the left side, both marked in pixels from the top-left corner of the viewport:

• Minor ticks every 10 pixels for fine positioning.
• Medium ticks every 50 pixels to make counting easy.
• Numbered major ticks every 100 pixels so you always know where you are.
• A crosshair marker on each ruler that follows your cursor, showing its horizontal position on the top ruler and its vertical position on the left one.

How to turn on page rulers

1. Open the page you want to measure.
2. Start Screen Ruler by clicking its toolbar icon, pressing Alt + Shift + S (Option on a Mac), or right-clicking the page and choosing Screen Ruler.
3. Press 4, or click Page Rulers in the control bar at the bottom of the page.
4. Move your cursor to an edge you want to check and read its position against the rulers.

Press 4 again to hide them. Screen Ruler remembers the setting, so the rulers come back the next time you activate it.

How they behave

• They measure the viewport. Zero is the top-left corner of the visible window, so the scale stays put as you scroll. Use them to check what lands where on screen, for example how far a heading sits from the left edge.
• They rebuild when the window resizes. Drag the window narrower and the rulers redraw to fit, while a small label briefly shows the new viewport size.
• They work alongside everything else. Element highlighting, distance lines, the layout grid overlay and breakpoint lines all stay usable with the rulers on, and the rulers stay visible when you pause inspection.
• They stay out of the way. The rulers ignore the mouse, so they never block a click or a hover.
• They use CSS pixels. The scale is in the same unit as your stylesheet, so an element that CSS sizes at 300 pixels wide spans 300 on the ruler, whatever the screen density or browser zoom.

Rulers or distance measurement?

Rulers and element measurements answer different questions, and Screen Ruler has both. The rulers answer "where is this on screen?". For "how far apart are these two things?", select one element and hover the other to measure the distance between them. The two work well together: rulers for alignment against the window, distance lines for gaps between elements.

When it is useful

• Checking alignment. Put the crosshair on the left edge of one element, then move down the page to see whether others start at the same position.
• Above the fold checks. See how far down the window a call to action sits at a given window size.
• Quick on-screen measurements of anything you can see, including images, canvas drawings and video, where there is no element edge to snap to.
• Replacing a desktop ruler app when all you need to measure is inside the browser.

For a comparison with other options, see the best pixel ruler extensions for Chrome. Page Rulers are free in Screen Ruler, with no account needed.

Common questions

Is there a ruler built into Chrome?

No. Chrome DevTools can show element sizes, but it has no on-page pixel ruler. Screen Ruler adds rulers to the top and left of any page, plus element-to-element distance measurement.

Do the rulers measure the whole page or just what I can see?

The visible window. Zero is the top-left corner of the viewport and the rulers do not scroll with the page, so they show where things sit on screen at the current window size.

Can I measure things that are not HTML elements, like part of an image?

Yes. The crosshair follows your cursor anywhere, so you can read the position of any point you can see, including detail inside images, video or canvas drawings.

Are the page rulers free?

Yes. Page Rulers are part of Screen Ruler's free plan and stay free.