Using Pixel Converter and Screen Ruler Together

The pixel converter answers "what physical size does this pixel count correspond to?" The on-screen ruler answers "what does that physical size actually look like?" Used together, they let you go from a Figma spec or CSS value all the way to a verified, hold-up-a-credit-card-and-check physical size — without ever leaving your browser. This guide walks through five concrete workflows where the combination beats either tool alone.

Why combine them

A pixel converter on its own is correct, but abstract. It tells you that 100 px at 326 PPI is 7.8 mm. Whether 7.8 mm is the right size for what you are designing (button tap target, icon, body text x-height) is a separate question that the converter cannot answer.

The on-screen ruler closes that loop. You see 7.8 mm rendered at 1:1 on the screen, hold up a real ruler to verify, and now you know whether the design decision matches your physical expectation. The combined workflow is:

spec / design value (px)
   ↓ pixel converter
physical size (mm/cm/inch)
   ↓ on-screen ruler
visual check + physical verification
   ↓ adjust if wrong
back to spec

Three steps, all in one browser tab pair, no print preview, no paper.

Workflow 1: sizing a mobile button tap target

Problem: Apple's HIG recommends a 44 × 44 pt minimum tap target. A designer's Figma file shows 44 × 44 px — are those the same thing? How big is that in millimeters? Is that thumb-friendly?

Steps:

1. Open the Pixel Converter and switch to "Auto-detect device PPI" mode.
2. Enter 44 in the pixel field. The converter shows the physical size — about 3.4 mm on a 326 PPI iPhone 13 in CSS px terms, but 10.3 mm if you treat 44 as device pixels.
3. The HIG actually defines 44 points (Apple's logical unit) which corresponds to 44 CSS px on an iPhone. The auto-detected PPI for a 326 device gives you the actual physical size as 3.4 mm — too small for a thumb.
4. Open the on-screen ruler in a second tab and set it to mm. Find the 3.4 mm mark and visually compare to your thumb pad — clearly insufficient.
5. Iterate: 10 mm is comfortable for a thumb. Reverse the converter — enter "10 mm" with auto-detected PPI — and read back the px count.
6. Update the Figma file with the new px value.

Why both tools matter: the converter gives you the number, the ruler gives you the gut check that the number is reasonable for human anatomy.

Workflow 2: print sizing a photograph

Problem: a client wants a 200 × 300 mm print. You have a 4000 × 6000 px image. Will it print sharp at 300 DPI?

Steps:

1. Open the Pixel Converter, switch to "Print mode", and set DPI = 300.
2. Enter 4000 px → 338.7 mm. That is more than enough width for the 200 mm target.
3. Enter 6000 px → 508 mm. Plenty for 300 mm height.
4. The image is print-sharp at the target size.
5. Reverse: enter 200 mm → 2362 px. The image (4000 px wide) has comfortable headroom for cropping and color adjustments before print.
6. (Optional verification) open the on-screen ruler and zoom your image preview to match 200 mm displayed width. Check that the image looks sharp at that on-screen size — a rough sanity check that the print will look good.

Why both tools matter: the converter confirms the math (you have enough pixels), the on-screen ruler gives you a preview of what 200 mm wide looks like before you commit to print.

Workflow 3: cross-checking a label or sticker design

Problem: a sticker design is 600 × 600 px in Figma. You want to print it at exactly 30 mm × 30 mm. What DPI do you set the printer to?

Steps:

1. Open the Pixel Converter, switch to "Print mode".
2. Enter 600 px in pixels, and either 30 mm in millimeters. The converter solves for DPI: 600 px / 30 mm = 600 / (30/25.4) = ~508 DPI.
3. That is a non-standard DPI. Round to 600 DPI and recompute: 600 px / 600 DPI × 25.4 = 25.4 mm — your sticker will print slightly smaller than 30 mm.
4. To hit exactly 30 mm at 600 DPI, you need to resize the Figma asset to: 30 / 25.4 × 600 = 709 px. Update Figma.
5. Open the on-screen ruler in a second tab, set to mm. Find the 30 mm mark and overlay your Figma export at 1:1 zoom to confirm it visually matches the ruler.

Why both tools matter: the converter does the math three ways (px↔mm↔DPI), the ruler is the physical check before you commit to a print job that costs money.

Workflow 4: matching a CSS button to a physical credit card

Problem: you are designing a "card-like" UI element that should feel the same size as a real credit card (ISO/IEC 7810 ID-1: 85.60 × 53.98 mm). What CSS dimensions do you set?

Steps:

1. Open the Pixel Converter with auto-detect device PPI on. Pick the target device (say, iPhone 15: 460 PPI).
2. Enter 85.60 mm → ~1551 px (in device px) or ~517 CSS px at DPR 3.
3. Repeat for 53.98 mm → ~978 device px / ~326 CSS px.
4. In CSS, set the card element to width: 517px; height: 326px — but on the iPhone 15, the responsive design will scale to fit the viewport. So you want to compute the same in vw units: 517 / 393 × 100 = ~131.5 vw, which is wider than the screen. The card design needs to fit within the device width.
5. Reverse: enter the iPhone 15's viewport width (393 CSS px) → in mm, that is 65.5 mm. A "credit card sized" element does not fit on the iPhone 15 in portrait.
6. Open the on-screen ruler and hold up an actual credit card on your phone screen — confirm the spatial relationship visually.

Why both tools matter: the converter does the cross-unit gymnastics, the ruler with a real credit card gives you the physical reality that any viewport-relative design has to deal with.

Workflow 5: validating an unknown device's PPI

Problem: you have an old tablet or kiosk display with no manufacturer spec sheet. You want to design for it but the pixel converter can't auto-detect its PPI.

Steps:

1. On the unknown device, open the Screen Ruler home page. Calibrate against a credit card — slide the calibration handle until the on-screen credit card width matches a real credit card you hold against the screen.
2. The Screen Ruler now knows the device's effective PPI from the calibration ratio.
3. Open the Pixel Converter in another tab on the same device. The auto-detection will pick up the calibration data and use the measured PPI rather than a database lookup.
4. Test by entering 100 mm in the converter and visually overlaying it against a 100 mm ruler mark. They should match.
5. You now have a working converter for an unlisted device.

Why both tools matter: the ruler's calibration step is the only way to extract PPI from a physical reference when the device is not in the database. The converter then consumes that PPI to give you arbitrary unit conversions.

Practical tips

• Open both tools in adjacent browser tabs so you can switch in one click. Both pages are < 200 KB and load instantly.
• Keep the on-screen ruler in mm when designing for mobile, and in inches when designing for US print. Mixing causes mental friction.
• Re-calibrate weekly if you use the on-screen ruler heavily. The Screen Ruler caches calibration for 30 days; refresh against a credit card if you change browsers or zoom levels.
• Bookmark both URLs: /pixel-converter and /. One keyboard shortcut for each saves real time over a year of design work.

When you only need one

• Only the pixel converter: pure abstract conversion (e.g. spreadsheet of px → mm at one fixed DPI). No need for the ruler.
• Only the on-screen ruler: physical measurement of an on-screen object (a button rendered in your browser). No need for the converter.

But when you are designing from spec to physical reality, the two-tool workflow is the fastest path. Try it: open the pixel converter and the on-screen ruler in two tabs and run through Workflow 1 with your own design system.

Bonus: workflow shortcuts

Once you have used the combined workflow a few times, these shortcuts cut another 30–60 seconds:

• Pre-set your DPI: if you always print at 300 DPI, the pixel converter remembers your last-used DPI in localStorage. Open the page and your default is already there.
• Bookmark with query params: the converter accepts query parameters like ?px=100&dpi=300, so you can save direct-deep-link bookmarks for your most-common conversions.
• Use the on-screen ruler in fullscreen when verifying — press F (or the fullscreen icon) to remove browser chrome. The ruler grid shows mm or inches edge-to-edge for clearer comparison against physical objects.
• Combine with the PPI Calculator when working with an unlisted display: compute PPI once from the display's resolution and physical diagonal, then plug that PPI into the converter as a custom value.
• Pair the converter with the Aspect Ratio Calculator for image-spec workflows: ARC handles the aspect math, the pixel converter handles the physical-size math, and the on-screen ruler is the final visual gut-check.

A worked example: end-to-end

Designing a 6 cm wide QR-code sticker for a product label, target print quality 300 DPI:

1. Pixel converter, print mode, 300 DPI: enter 60 mm → 709 px. The QR code source asset should be at least 709 px wide.
2. Generate the QR code at 800 px (safety margin) and place it in your label artwork.
3. On-screen ruler: set to mm, display 60 mm guide on screen, overlay the artwork preview at 1:1 zoom to confirm it spans the 60 mm guide.
4. Pixel converter, reverse mode: enter 800 px at 300 DPI → 67.7 mm. The print will be slightly larger than 60 mm — adjust your layout if the label's bounding box is tight.
5. Send to print with confidence that the math, the visual reality, and the production output all line up.

The whole workflow takes under two minutes once you have the tools open. Try it on your own next print or screen-sized design.