Free Pixel Ruler — PPI, Print Size & Resize Calculator

Three calculators in one: PPI from screen dimensions, maximum print size from pixel count, and aspect-locked image resizing.

Enter your details
px
px
in
Result
Enter your details on the left, then press Calculate.

What is this calculator for?

You're a designer working on a UI mockup and need to measure pixel distances between elements. Or you're QA-testing a website and need to verify a spacing issue's exact pixel count. The pixel ruler is an on-screen measuring tool — overlay it on your browser or design canvas to read exact pixel distances between elements.

Pixel measurement in design. Standard web design uses CSS pixels (logical pixels that scale with device pixel ratio). Modern Retina/HiDPI displays have 2-3 device pixels per CSS pixel — making a "10px font" still appear as 10px to the user regardless of screen density. Design tools (Figma, Sketch, Photoshop) work in pixels with scaling for export to different device densities. Browser dev tools' inspect panel shows element dimensions in pixels.

This pixel ruler displays a draggable, resizable ruler overlay for measuring distances on screen. For precise measurement of design files: use the design tool's built-in measurement tools (Figma's measurement plugin, Photoshop's ruler tool). For measuring on-screen content in deployed websites: browser dev tools' Inspect Element gives precise pixel coordinates.

How to use this calculator

Activate the ruler. Position over the content you're measuring. Drag the ruler edges to mark distance between two points. Read the pixel measurement.

For web designers: pair with Figma or browser dev tools for cross-checking design implementations. Pixel-perfect designs require matching spacing, sizing, and positioning across mockup and production.

For QA testing: identify visual bugs related to spacing, sizing, alignment. "The button is 4px off center" requires precise measurement to verify and reproduce.

Understanding your results

The ruler returns pixel distance between specified points.

Common UI spacing references. Material Design baseline grid: 8px (most UI elements should be multiples of 8px for visual harmony). Apple Human Interface Guidelines: minimum 44×44 pt for tap targets on iOS (about 44px at 1x display density). Web Content Accessibility Guidelines: minimum 44×44 CSS pixels for interactive elements. Touch-friendly button heights: minimum 44-48px; 56-64px for primary CTAs.

Common font size references for web. Body text: 14-18px (16px is the most common modern default). Small text: 12-14px (legal copy, footnotes). H1: 32-48px desktop; 24-32px mobile. H2: 24-32px desktop; 20-24px mobile. Buttons: 14-16px button text. Hero headlines: 48-72px+ for large impact.

The device pixel density complication. iPhone displays render at 2x or 3x device pixel ratio — 1 CSS pixel = 2 or 3 physical pixels. Designers work in CSS pixels (1x); export designs at 2x or 3x for production. Measuring an image rendered on a high-density display: the on-screen measurement matches CSS pixels even though more physical pixels are used. For most web design work: stick with CSS pixels and let the browser handle density.

Common pixel sizes worth memorizing. iPhone screens: 375 CSS pixels wide (most current models). Standard laptop: 1280-1440 CSS pixels wide (varies). Common desktop monitor: 1920 CSS pixels wide. Tablet portrait: 768 CSS pixels (iPad standard). Tablet landscape: 1024 CSS pixels. Standard responsive breakpoints: mobile under 640px, tablet 640-1024px, desktop 1024-1440px, large desktop 1440+px.

A worked example

Lin is implementing a designer's mockup. Figma file shows: hero title 48px bold, subtitle 20px, button height 56px with 8px corner radius. She needs to verify her CSS implementation matches.

She uses browser dev tools to inspect the deployed elements. Hero title computed CSS: font-size: 48px. Matches design. Subtitle: font-size: 20px. Matches. Button: height: 56px; border-radius: 8px. Matches.

Spacing checks. Designer specified 64px between hero title and subtitle. She measures with pixel ruler (or Inspect): margin-bottom on title is 48px in CSS. Doesn't match. Investigation: she had used the design system's default margin-bottom value (48px) instead of the specific override the designer requested (64px). She updates: margin-bottom: 64px on hero title. Verifies measurement: now 64px. Designer signs off on the visual implementation.

Variation: a marketing manager is reviewing a website and feels the button "looks too small." She inspects with dev tools: button height is 32px. Recommends increasing to 48-56px for better visibility and tap-target accessibility. Designer agrees; updates the implementation. Same screen, same button, but now visually more prominent and accessibility-compliant.

The pixel ruler enables this kind of communication: visual claims ("too small," "off-center," "not consistent") become specific pixel measurements that can be addressed precisely.

Related resources

For color picking and palette in design, see Color Picker and Color Converter. For aspect ratio calculations during image and layout work, the Aspect Ratio Calculator. The Material Design layout guidelines publish the 8dp baseline grid standard; Apple's Human Interface Guidelines specify minimum tap target sizes and other measurement standards for iOS development.

Related calculators

aspect ratiounit convertercolor converter

Frequently asked questions

What is PPI vs DPI?

PPI (pixels per inch) describes screens — how many pixels are packed into one inch of display. DPI (dots per inch) describes printers — how many ink dots are placed in one inch of paper. In practice, the terms are often used interchangeably for digital files (a '300 DPI' photo file really means '300 PPI when printed') even though it's technically loose.

What's the best resolution for printing?

300 PPI at final print size is the gold standard for photo prints, magazines, and fine art. 150 PPI is acceptable for newspapers, posters, and anything viewed from more than 6 feet away. Below 150 PPI, you'll see pixelation in a normal photo print. Large prints (24×36 inches and up) can get away with 100–150 PPI because viewers stand further back.

What is a Retina display?

Apple's marketing term for displays with pixel density high enough that individual pixels are not visible at typical viewing distance. The threshold varies with viewing distance: ~218 PPI for a 27" iMac (3 ft viewing), ~264 PPI for an iPad (1.5 ft viewing), ~326 PPI for an iPhone (1 ft viewing). Other manufacturers call equivalent screens HiDPI or 4K UHD.

How do I upscale images?

Traditional bicubic/bilinear scaling above ~150% softens detail. For better results, use AI upscalers like Topaz Photo AI, Adobe's Super Resolution (in Camera Raw), or free options like Upscayl. These reconstruct plausible detail rather than just stretching pixels. The honest rule: never assume an upscaled image has the detail of a native shot.

Web vs print resolution — what's the difference?

Web images are sized in pixels because the display defines physical size at view time. Print images are sized in inches because the printer defines pixel-to-paper mapping. The same 1920×1080 file looks crisp on a phone (small physical size, high PPI) and pixelated on a 24-inch monitor (large physical size, lower effective PPI). For print, always think in physical dimensions plus DPI.

What's the difference between CSS pixels and device pixels?

Scale factor. CSS pixel: the logical unit web designers use; meant to be roughly consistent visual size across devices. Device pixel: the actual physical pixel on the screen. On a Retina display (iPhone Pro models, modern MacBook Pro): 2-3 device pixels per CSS pixel. A '16px font' on Retina displays uses 32 or 48 actual device pixels but appears the same visual size as 16 device pixels on a non-Retina display. This complication is handled automatically by browsers and CSS; designers and developers work in CSS pixels almost exclusively.

Why are some design tools accurate to half pixels?

Vector graphics tools (Figma, Sketch, Illustrator) work in floating-point coordinates that include sub-pixel positions. Sub-pixel positioning is real for rendering (anti-aliased edges, sub-pixel text positioning), but for design specs, integer pixel values are cleaner. Designs with 0.5px borders or 0.3px spacing tend to render inconsistently across browsers and zoom levels. Best practice: round all dimensions and positions to integer CSS pixels for predictable cross-browser rendering. Pixel-perfect designs use integer values throughout.

What pixel size should I use for body text?

16-18 CSS pixels for desktop, 14-16 for mobile. Why 16px specifically: the default browser font size is 16px; using this as your base ensures backward compatibility, accessibility for users who haven't adjusted browser zoom, and visual standardness. Smaller body text (under 14px): bad for accessibility, hard to read on high-density displays, common cause of users zooming or struggling. Larger body text (18-20px): trendy, more readable, less common but increasingly popular in modern designs. The minimum WCAG-compliant body text is around 14px at most; 16-18 is safer for accessibility.

How do I make a pixel-perfect design?

Use 8px or 4px baseline grid. Position all elements on multiples of 8 (or 4 for tight spacing). Most design systems (Material, Apple's HIG, Tailwind's spacing scale, Chakra UI's spacing) use 8px or 4px increments. Spacing: 0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96, 128. Font sizes follow similar conventions: 12, 14, 16, 18, 20, 24, 30, 36, 48, 64. Padding, margins, and gaps follow the same scale. The discipline of designing on an 8px grid produces visually harmonious results without obsessing over individual values; the grid does the harmony work.

What pixel sizes are common for screens?

Standard screen widths (CSS pixels): iPhone Pro/Mini portrait: 375. iPhone Pro Max portrait: 430. iPad portrait: 768. Laptop standard: 1280-1440. Desktop full HD: 1920. Ultrawide: 2560-3440+. Standard responsive breakpoints in CSS: mobile under 640px, tablet 640-1024px, desktop 1024-1440px, large desktop 1440+px. Tailwind CSS breakpoints (most popular utility framework): sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px. Bootstrap: similar but slightly different. Design at multiple breakpoints; don't assume one specific viewport width.

Sources