Pixel ruler
A ruler marked in pixels, for checking the size of things on screen: a button, an image, the gap between two elements. It opens in px mode, and you can switch back to cm or inches at the top.
What it measures
The ruler counts CSS pixels, the unit web pages and most design tools use for layout. It isn't affected by calibration. 100 px on this ruler is the same 100 px in your stylesheet or design file, whatever the physical size of your screen.
On high-density screens a CSS pixel covers more than one physical pixel: two on a typical laptop, three on most phones. That's why images for the web are often exported at 2× or 3× their layout size.
Measuring a screenshot or mockup
- Choose Measure a photo in the tool bar (under More on a phone) and open the image.
- Drag the ruler next to the element, and set A and B on its edges.
The image is scaled to fit the canvas, so a screenshot larger than the canvas reads smaller than its real pixel size. For exact values, use a screenshot no larger than the canvas, or divide by the scale.
Tips
- Keep browser zoom at 100%. At other zoom levels a CSS pixel is drawn larger or smaller.
- Turn the ruler to 90° to measure heights.
- With a marker selected, the arrow keys move it one pixel at a time, and Shift moves it ten.