PX to Inches Converter

This PX to inches converter takes a pixel value and turns it into a real-world measurement based on your screen’s pixel density. Pixels are abstract units. They mean nothing physical on their own until you know the DPI of the display rendering them.

How It Works

The math is straightforward:

• Inches = Pixels / DPI
• At 96 DPI (the Windows standard), 96 px equals exactly 1 inch
• At 192 DPI (Retina), you need 192 px to cover the same physical inch

Choose a preset or enter a custom DPI. The result updates as you type.

Common DPI Reference

When Would You Need This?

• Preparing print assets from a screen design (Figma, Photoshop, etc.)
• Setting physical dimensions for UI elements in cross-platform apps
• Converting CSS pixel values for PDF or document generation
• Verifying that a design scales correctly across different screen densities

A Note on DPI vs PPI

DPI (dots per inch) is a print term. PPI (pixels per inch) is the screen equivalent. In everyday usage and in most design tools, the two are treated as interchangeable. For this converter, they are identical: both describe how many units fit in one physical inch, and the formula is the same either way.

Not sure what DPI your screen uses? Check your OS display settings, or look up your monitor’s spec sheet. For most Windows desktops, 96 is the safe default. For a MacBook with a Retina display, 192 or higher is typical. Learn more about DPI on Wikipedia.

What Is a PX to Inches Converter?

A PX to inches converter calculates the physical size of a pixel-based measurement using a known PPI (pixels per inch) value. Because a pixel carries no fixed physical size on its own, the converter needs 2 inputs: the pixel count and the screen or document resolution. Without PPI, the conversion is meaningless.

The formula is: Inches = Pixels ÷ PPI.

At 96 PPI (the web standard), 192px equals exactly 2 inches. That same 192px at 300 PPI (print standard) equals only 0.64 inches. Same pixel count, completely different physical output.

Who uses it:

• Web designers checking how CSS dimensions translate to physical screen size

• Print designers converting screen mockups to print-ready dimensions

• UI/UX professionals working across web design and print design outputs

• Developers working with CSS absolute units in print stylesheets

The converter sits at the intersection of digital measurement and physical output. It's one of those tools you don't think about until something prints at the wrong size or a layout looks tiny on a high-density screen.

What Is the Formula for Converting PX to Inches?

Inches = Pixels ÷ PPI. That's the entire formula. The result changes entirely based on which PPI value you plug in, so choosing the right PPI for your medium is the only thing that actually matters here.

The reverse formula, for going the other direction, is: Pixels = Inches × PPI.

Converting PX to Inches at 96 PPI (Web Standard)

96 PPI is the CSS reference pixel standard, set by the W3C in CSS2.1 and locked in place because too much existing web content relied on the 96 PPI assumption (W3C CSS specification). Every major browser defaults to this value.

Quick reference at 96 PPI:

• 16px = 0.167 inches

• 96px = 1.00 inch

• 192px = 2.00 inches

• 1920px = 20.00 inches

Use this baseline for any calculation involving screen-rendered CSS layouts or web-based graphic design.

Converting PX to Inches at 300 PPI (Print Standard)

300 PPI is the professional print standard, based on the human eye's limit for distinguishing individual dots at a normal reading distance of 12 to 14 inches (PrintNinja).

Commercial offset presses max out at roughly 356 DPI, making 300 DPI the practical ceiling for professional output (Chilliprinting). Submitting files above 300 PPI to an offset press produces no visible quality improvement and creates larger, slower-to-process files.

Quick reference at 300 PPI:

• 300px = 1.00 inch

• 900px = 3.00 inches

• 2550px = 8.5 inches (standard US Letter width)

• 3300px = 11.0 inches (standard US Letter height)

What Is PPI and Why Does It Change the Conversion?

PPI (pixels per inch) is the number of pixels packed into one linear inch of a display or digital file. It's the variable that makes the same pixel value physically larger or smaller depending on context. Change the PPI, and the physical output of every pixel dimension in your design changes with it.

Average smartphone PPI reached 420 in 2024, up from 350 in 2019 (Gitnux, 2024). The gap between web baseline PPI and modern device PPI is now enormous.

DPI vs PPI

PPI is the correct term for screens. DPI (dots per inch) describes physical ink dots placed by a printer on paper.

Most design tools, converters, and browser documentation use the two terms interchangeably. For screen work, PPI is technically accurate. For print, DPI is the right call. The formula is identical for both.

Device Pixel Ratio and CSS Pixels

Apple introduced Retina displays in 2010 at 192 PPI, exactly double the 96 PPI CSS baseline. This created a 2:1 device pixel ratio (DPR), meaning 1 CSS pixel maps to 2 physical pixels on those screens.

Modern devices now range from DPR 1.0 to DPR 4.0. A CSS pixel value stays visually consistent across all of them because the browser scales physical pixels to match the CSS reference pixel, not the other way around.

PX to Inches Conversion Chart (Common Values)

The right column to use depends entirely on your output medium. Web layouts use 96 PPI. Standard commercial print uses 300 PPI. Large-format print viewed from a distance works at 150 PPI.

A 1920px wide design at 96 PPI is 20 inches wide on screen. That same file at 300 PPI only prints at 6.4 inches. This is one of the most common surprises for designers moving from screen to print for the first time.

For PX to MM and PX to CM conversions, the same PPI-dependent logic applies. Only the unit changes, not the underlying formula.

How Does Screen Resolution Affect PX to Inches Conversion?

Screen resolution and PPI are not the same thing, and mixing them up causes wrong conversions. Resolution is the total pixel count. PPI is the physical density. A 27-inch 4K monitor and a 27-inch 1080p monitor share the same physical size but have completely different PPIs: 163 PPI vs 82 PPI, respectively.

A 300px element at 163 PPI measures 1.84 inches. The same 300px element at 82 PPI measures 3.66 inches. Double the PPI, half the physical size.

To calculate your monitor's PPI:

Divide the horizontal pixel count by the physical screen width in inches.

Example: 1920px ÷ 20.9 inches (measured width of a 24" screen) = 91.8 PPI.

As of 2024, 1920x1080 remains the most common desktop resolution worldwide, holding 23.12% of the market (StatCounter via Gitnux, 2024). That resolution at a typical 24-inch screen size sits at roughly 92 PPI, close to but not exactly the 96 PPI CSS baseline.

Device Pixel Ratio and CSS Pixels

DPR is the ratio between physical pixels and logical CSS pixels on a device.

A screen with 192 physical pixels per inch and a DPR of 2 presents itself to CSS as a 96 PPI screen. Your CSS values stay the same. The browser handles the physical pixel multiplication behind the scenes.

Common DPR values in 2024:

• DPR 1.0: standard desktop monitors

• DPR 1.5: some Windows laptops at 1440p

• DPR 2.0: MacBook Pro, most mid-range smartphones

• DPR 3.0: iPhone 15 Pro (460 PPI physical), Pixel 8

How to Calculate Your Monitor's PPI

Formula: PPI = √(width² + height²) ÷ screen diagonal in inches.

For a 27-inch monitor at 2560x1440: √(2560² + 1440²) ÷ 27 = 108.8 PPI.

Most operating systems let you skip the math. On Windows, check Display Settings under Scale and Layout. On macOS, the About This Mac panel shows display resolution. Chrome DevTools shows the DPR of any browser window via the window.devicePixelRatio console command.

PX to Inches Conversion for Print Design

A pixel value from a screen design means almost nothing for print unless you know the document's PPI setting. 300 PPI is the industry standard for commercial offset printing, based on the human eye's resolution limit at 12 to 14 inches viewing distance (Chilliprinting, PrintNinja).

The formula does not change. Only the PPI input does.

Common print formats in pixels at 300 PPI:

• Business card (3.5 × 2 in): 1050 × 600 px

• US Letter (8.5 × 11 in): 2550 × 3300 px

• A4 (8.27 × 11.69 in): 2480 × 3508 px

• A3 poster (11.69 × 16.54 in): 3508 × 4961 px

Why Designing at 72 or 96 PPI for Print Fails

A 1920 × 1080 pixel file (1080p screenshot) at 300 PPI only yields a 6.4 × 3.6 inch print (print resolution standards research, 2025).

That same file looks like it fills a 24-inch monitor on screen. Designers who pull images from the web and drop them into print layouts run into this constantly.

Changing the DPI value in Photoshop without unchecking "Resample" simply adds interpolated pixels. It does not recover real image data. The result prints soft regardless of what the DPI metadata says.

Setting Document Resolution in Photoshop, Illustrator, and InDesign

Photoshop: Set PPI in the Image Size dialog before starting. 300 PPI at final output dimensions. Never set it after placing all artwork.

Illustrator: Use Document Setup to set units. Effects and raster effects resolution is set separately under Effect > Document Raster Effects Settings. Set this to 300 PPI before adding any raster effects.

InDesign: Set document units to inches or millimeters from the start. Export as PDF with 300 PPI image downsampling. Check effective image PPI in the Links panel before sending to press.

For PT to PX and PT to CM conversions in print workflows, the same resolution dependency applies.

PX to Inches in Web and UI Design

In CSS, 1 inch equals exactly 96 CSS pixels. This is not a physical measurement. It's a fixed ratio defined in the W3C CSS specification, anchored to the reference pixel standard.

The CSS in unit is unreliable for screen design. A CSS rule of width: 1in renders as 96px in every browser, but the physical inch on screen will vary with the display's actual PPI. On a 163 PPI monitor, that 96px element is 0.59 physical inches. On a 92 PPI monitor, it's 1.04 physical inches.

Use px for screen layouts. Reserve in for print stylesheets only.

How Figma, Sketch, and Adobe XD Handle PPI

Figma works in logical pixels at 96 PPI by default. The Inspect panel shows pixel dimensions, not inches. Export at 1x for 96 PPI screens, 2x for DPR-2 screens, 3x for DPR-3 devices.

Sketch also uses 96 PPI as its baseline. It labels export scales as @1x, @2x, @3x for the same reason.

Adobe XD follows the same model. Pixel values in XD correspond to logical CSS pixels at 96 PPI.

None of these tools produce physically accurate inch measurements when designing for screen. They produce CSS-pixel-accurate measurements, which is exactly what you need.

When to Use px vs in in CSS

Use px for: font sizes, spacing, borders, widths, heights, media queries, anything screen-related.

Use in for: @media print stylesheets, where the browser maps CSS physical units to real-world measurements on paper.

Mixing in units into a screen stylesheet is one of those mistakes that looks fine in development (because your monitor is close to 96 PPI) and breaks subtly on high-density displays. I've seen developers do this with line heights and margin values more times than I can count.

For related CSS unit conversions, PX to EM, PX to REM, and PX to PT each follow the same PPI-anchored logic.

How to Convert PX to Inches in Design Tools

Every major design tool handles the pixel-to-inch relationship differently. The conversion formula never changes, but where you apply it does.

Figma works entirely in pixels with no native inches canvas mode. Photoshop gives you full control over document PPI from the start. InDesign is built around physical units first, pixels second.

Converting PX to Inches in Figma

Figma has no native inches mode. It's a screen design tool and works in logical pixels at the 96 PPI reference.

For print work in Figma, calculate the pixel dimensions first using the formula (Pixels = Inches × PPI), then enter those values directly as frame dimensions.

• A 6 × 4 inch print at 300 PPI requires a 1800 × 1200 px Figma frame

• A US Letter page at 300 PPI requires a 2550 × 3300 px frame

• Export at 1x for 96 PPI screen, 2x for DPR-2 devices

Figma's community plugin library includes several unit converter tools (Unit Converter Pro, Advanced Units Converter) that handle the math directly inside the app.

Converting PX to Inches in Photoshop

Photoshop shows pixel dimensions and physical size simultaneously in the Image Size dialog.

Key step: uncheck "Resample" before changing the PPI value if you only want to see the physical output size without altering pixel count.

Check "Resample" only when you need to add or remove actual pixels. Changing DPI with Resample active adds interpolated pixels, not real image data. Results look soft in print regardless of what the DPI number says.

Adobe sets document raster effects resolution separately under Effect > Document Raster Effects Settings. Missing this step is one of the most common reasons drop shadows and blurs look pixelated in final print output.

Converting PX to Inches with CSS

CSS treats 1 inch as exactly 96 CSS pixels, fixed since CSS2.1 (W3C specification).

Use the in unit only in @media print stylesheets:

@media print {
  .page-container {
    width: 8.5in;
    height: 11in;
    margin: 0.5in;
  }
}

For screen-based layouts, stick to px. Using in units in a screen stylesheet produces inconsistent physical sizes across different monitor densities, because the CSS inch is tied to the 96 PPI reference, not the device's actual PPI.

For REM to PX and EM to PX conversions, the same 96 PPI CSS baseline applies. 1rem = 16px at default browser settings. 1in = 96px in CSS. These are fixed ratios, not device-dependent ones.

What Are Common PX to Inches Conversion Mistakes?

Most conversion errors come down to one thing: using the wrong PPI for the output medium.

The formula is simple. The mistakes are about context, not math.

Assuming 72 PPI for Web

72 PPI is a legacy value from early Apple/Mac typographic conventions where 72 points equaled 1 inch.

96 PPI has been the CSS and Windows baseline since the late 1990s. Using 72 PPI for web calculations produces dimensions that are 25% larger than what browsers actually render.

Quick check: if your web converter is returning numbers that seem slightly off, verify which PPI value it defaults to. A lot of older online tools still use 72.

Confusing Screen PPI with Document PPI in Photoshop

A display that runs at 92 PPI physically does not change what Photoshop does with a 72 PPI document.

Document PPI and screen PPI are independent settings. Photoshop's canvas PPI controls print output size, not how the file looks on your monitor. A 300 PPI Photoshop document looks exactly the same on screen as a 72 PPI document at the same pixel dimensions. The difference shows up only at the printer.

The most common mistake is opening a canvas at screen resolution and only realising it is too small when sending to print.

Ignoring Device Pixel Ratio for HiDPI Screens

A 300px button is 1.84 inches on a 163 PPI (27-inch 4K) monitor and 3.26 inches on a 92 PPI (24-inch 1080p) monitor.

Designing at 1x pixel dimensions and not accounting for DPR means your assets look blurry on Retina and HiDPI screens. iPhone 15 Pro runs at 460 PPI with DPR 3. A 1x asset on that screen is physically tiny and appears soft next to native-resolution content.

Export at 2x minimum for any asset targeting modern smartphones.

Mixing px and pt Units in CSS

1 pt = 1.333 CSS px at the 96 PPI CSS reference.

That 0.333px difference looks negligible. It compounds across a design system with dozens of type sizes, spacing tokens, and border widths. Mixing pt and px values in the same stylesheet produces layout inconsistencies that are surprisingly tricky to diagnose.

Stick to one unit system per medium. Pixels for screen. Points for print stylesheets, where the relationship between pt and physical size is well defined.

PX to Inches Reference for Standard Screen Sizes

Real device PPI values matter when checking whether a CSS-pixel dimension will look visually appropriate on a specific screen.

The 96 PPI CSS baseline is an approximation. Actual desktop monitors cluster between 82 and 109 PPI. The further a device deviates from 96 PPI, the more a CSS inch diverges from a physical inch.

MacBook Pro 14-inch (254 PPI, DPR 2)

Apple's MacBook Pro 14-inch runs a 3024 × 1964 native resolution at 254 PPI with a DPR of 2 (Apple, 2024).

CSS sees it as a 1512 × 982 logical pixel canvas. A 1512px-wide layout fills the screen. A 1920px design gets scaled down, which is why Figma and web browsers handle this without any manual intervention from the designer.

iPhone 15 Pro (460 PPI, DPR 3)

The iPhone 15 Pro runs at 460 PPI with a 2556 × 1179 physical resolution, presenting itself to CSS as an 852 × 393 logical pixel viewport (Apple spec, confirmed via Gitnux 2024).

A 390px-wide mobile layout is standard practice precisely because it maps to the logical viewport of most modern iPhones. The physical screen is 2.82 inches wide. At DPR 3, every CSS pixel maps to a 3 × 3 block of physical pixels.

27-inch 4K Monitor (163 PPI, DPR 1)

A 27-inch 4K monitor at 3840 × 2160 sits at 163 PPI, roughly 70% denser than the 96 PPI CSS baseline.

Most Windows setups run 4K monitors at 125–150% scale, which effectively shifts the logical PPI back toward the 96–109 PPI range. macOS offers Retina scaling modes that do the same thing. The result: designers working in pixels at 96 PPI produce layouts that look visually consistent across monitor densities.

24-inch Full HD Monitor (92 PPI, DPR 1)

The 24-inch 1080p monitor at 92 PPI is the closest real-world match to the 96 PPI CSS baseline, which is why the web spec was written around it.

StatCounter data shows 1920 × 1080 held 23.12% market share among desktop screens worldwide as of January 2024. It remains the most common desktop resolution. A CSS layout designed at standard px values will render closest to its intended physical size on this class of monitor.

For related size and resolution conversions, Inch to PX, MM to PX, and CM to PX follow the same device-dependent logic covered here.

FAQ on PX To Inches Converters

How many pixels are in an inch?

There is no fixed answer. At 96 PPI (the web standard), 1 inch equals 96 pixels. At 300 PPI (print standard), 1 inch equals 300 pixels. The pixel count per inch always depends on the PPI of your output medium.

What is the formula to convert px to inches?

Divide the pixel value by the PPI of your medium.

Inches = Pixels ÷ PPI

At 96 PPI: 192px ÷ 96 = 2 inches. At 300 PPI: 192px ÷ 300 = 0.64 inches. Same pixel count, different physical output.

What PPI should I use for web design?

Use 96 PPI. The W3C CSS specification defines 1 CSS inch as exactly 96 pixels. All major browsers use this as the reference pixel. It has been the web baseline since CSS2.1 was standardized in 2011.

What PPI should I use for print design?

Use 300 PPI for professional print output. This is the industry standard for commercial offset printing. It matches the human eye's resolution limit at a normal reading distance of 12 to 14 inches.

Is DPI the same as PPI?

Not technically. PPI (pixels per inch) describes screen density. DPI (dots per inch) describes printer output. The conversion formula is identical for both. Most design tools and online converters treat them interchangeably in practice.

Why does the same pixel value look different on different screens?

Because screens have different physical pixel densities. A 300px element is 1.84 inches on a 163 PPI monitor and 3.26 inches on a 92 PPI screen. Device pixel ratio (DPR) adds another layer, mapping CSS pixels to physical pixels on high-density displays.

How do I convert px to inches in Photoshop?

Open Image Size. Uncheck "Resample," then change the resolution field to your target PPI. Photoshop recalculates the physical print dimensions without altering the pixel count. For print work, set 300 PPI before you start designing, not after.

Can I use inches in CSS?

Yes, but only reliably in print stylesheets. In a screen stylesheet, 1in renders as exactly 96px regardless of the monitor's actual PPI. Use px units for screen layouts and reserve in for @media print rules.

How do I convert px to inches in Figma?

Figma has no native inches mode. Use the formula: Inches × PPI = Pixels. For a 6 × 4 inch print at 300 PPI, set your Figma frame to 1800 × 1200 px. Community plugins like Unit Converter Pro handle this math inside the app.

What is the difference between screen resolution and PPI?

Resolution is the total pixel count of a display, such as 1920 × 1080. PPI is the physical density of those pixels per inch. Two screens can share the same resolution but have completely different PPIs depending on their physical size.