- Design Resources
- Inspiration
- Web Design
- Logos
- Graphic Design
- UI Design
- UX
- Advertising
- Motion graphics
- Infographics
- Wallpapers
- Various
- About Us
- Contact
Convert inches to pixels instantly. Choose your screen DPI and get accurate pixel values for any design or development project.
This inch to px converter turns any inch value into pixels instantly, using the DPI setting that matches your project. Designers, developers, and print professionals use it daily. The math is simple; knowing which DPI to use is the part that trips people up.
A pixel (px) is the smallest unit on a screen. Its physical size depends entirely on the screen's pixel density. On a standard monitor, one inch equals 96 px. On a high-resolution display, that same inch can contain 192 px or more. Same inch, very different pixel count.
Pixels = Inches × DPI
That's it. Multiply your inch value by the dots-per-inch of your target medium. The tool does this automatically as you type.
| DPI | Use Case | Example |
|---|---|---|
72 |
Legacy print, older software | Early desktop publishing |
96 |
Web & CSS (the browser standard) | Any CSS px value |
120 |
Windows HiDPI displays | 125% scaled monitors |
144 |
Retina / 2x displays | MacBook Pro, modern phones |
192 |
Ultra-high-density screens | 4K mobile, 3x assets |
| Custom | Print at a specific resolution | 300 DPI for photo printing |
Browsers define one inch as exactly 96 px, no matter the physical screen. This is a CSS reference pixel, not a hardware measurement. It ensures consistent sizing across devices. Use 96 DPI for anything destined for the web.
Print is different. A high-quality photo print typically needs 300 DPI. An A4 page at 300 DPI is 2480 × 3508 px. That same page at 96 DPI is only 794 × 1123 px. The DPI choice has major consequences for output quality.
Need the reverse? A px to inch converter works the same way: divide pixels by DPI. For further reading on resolution and pixel density, see the W3C CSS specification on absolute lengths.
An inch to PX converter is a calculation tool that transforms physical inch measurements into pixel values based on a screen's PPI (pixels per inch). The output is not fixed. 1 inch equals a different pixel count depending entirely on the device's pixel density.
At the web standard of 96 PPI, 1 inch = 96 pixels. That relationship holds for CSS calculations in every major browser, including Chrome, Firefox, Safari, and Edge.
The W3C CSS specification locked this in with CSS2.1 (2011), establishing a fixed ratio where 96px always equals 1 inch in screen rendering. Before that fix, the ratio varied by device, which broke layouts across monitors.
Who actually uses this tool:
Web designers converting mockup measurements to CSS values
UI developers building fixed-width components or banners
Print designers moving assets into digital formats
Anyone matching a physical size spec to a screen output
Key distinction: The converter handles CSS pixels, not physical device pixels. Those are two different things on high-density screens, and confusing them is one of the most common causes of blurry assets or oversized elements.
Pixels = Inches × PPI. That's the full formula. The result changes based on which PPI value you're working against.
At the 96 PPI web standard: 1 inch = 96px, 0.5 inch = 48px, 2 inches = 192px, 3 inches = 288px.
Switch to 300 PPI (print standard) and those numbers jump: 1 inch = 300px, 2 inches = 600px, 3 inches = 900px.
The formula stays the same. The variable is always PPI.
|
Inches |
72 PPI |
96 PPI (Web) |
150 PPI |
300 PPI (Print) |
|---|---|---|---|---|
|
0.25 |
18px |
24px |
37px |
75px |
|
0.5 |
36px |
48px |
75px |
150px |
|
1 |
72px |
96px |
150px |
300px |
|
2 |
144px |
192px |
300px |
600px |
|
3 |
216px |
288px |
450px |
900px |
|
5 |
360px |
480px |
750px |
1500px |
|
10 |
720px |
960px |
1500px |
3000px |
72 PPI comes from the legacy Mac standard Apple used in the original 1984 Macintosh, where 72 physical pixels matched 72 typographic points per inch so screen and print sizes matched exactly. Web.dev notes that 96 PPI became the dominant web standard starting in the 1980s because it was the default resolution of Windows and CRT monitors of the era.
PPI (pixels per inch) measures pixel density on a physical display. Higher PPI = more pixels packed into each physical inch = a larger pixel value for the same inch measurement.
The conversion result is completely dependent on this number. A 1-inch element on a 72 PPI display = 72px. That same 1-inch element on a 300 PPI display = 300px. Same physical size. Completely different pixel count.
Standard monitors (96 PPI): The W3C web reference point. Most 24-inch and 27-inch 1080p desktop monitors land between 81 and 96 PPI.
Mid-range laptops (120–150 PPI): A 27-inch 1440p (QHD) monitor sits at approximately 108 PPI. A 15-inch 1080p laptop screen runs closer to 141 PPI.
High-density displays (220+ PPI): The MacBook Pro 14-inch and 16-inch (2024) both run at 254 PPI (Apple specs). The iPhone 17 runs at 460 PPI (Wikipedia/Retina display data, 2025).
Print output (300+ PPI): High-quality print targets 300 PPI minimum. Retina-quality print requires 600 PPI.
The W3C CSS Working Group formalized 96 PPI as the CSS reference pixel in CSS2.1 because too much existing web content had been built assuming that ratio. Changing it would have broken layouts across the entire web. The CSS spec defines 1px as 1/96th of an inch, making 96 PPI the permanent web baseline.
That baseline does not change with your monitor's actual PPI. It's a logical reference, not a physical measurement of your screen hardware.
CSS pixels and physical pixels are not the same thing. This is the most misunderstood concept in screen measurement, and it directly affects every inch-to-pixel conversion for web use.
A CSS pixel is a logical unit. It's defined as 1/96th of an inch in the W3C specification. It does not map 1:1 to a physical dot on your screen once you move beyond standard 96 PPI displays.
A physical pixel is an actual hardware pixel on the display panel.
Device pixel ratio (DPR) = physical pixels / CSS pixels.
|
DPR |
Screen Type |
Physical pixels per CSS pixel |
|---|---|---|
|
1x |
Standard 96 PPI monitor |
1 |
|
2x |
Retina / HiDPI (MacBook Pro, iPhone 4+) |
2 |
|
3x |
High-end mobile (iPhone Plus models, flagships) |
3 |
On a 2x Retina display, a CSS element set to 96px (1 inch) is rendered using 192 physical pixels behind the scenes. The element still appears 1 inch wide visually, because the browser scales accordingly. But if you export an image at 96px for a 2x screen, it renders at half the expected size with visible blurring.
Web.dev confirms this directly: Apple introduced Retina displays in 2010 at a minimum of 192 PPI, exactly double the 96 PPI web standard, giving them a DPR of 2.
To check DPR in Chrome DevTools: open the console and type window.devicePixelRatio. A result of 2 means you're on a HiDPI screen.
Practical rule: For web design at 96 PPI, use CSS pixels. For assets on Retina or high-density screens, multiply by the DPR to determine the physical pixel export size needed.
Screen resolution defines total pixel count across the display. It does not define PPI, and it does not directly determine inch-to-pixel conversion results.
PPI is calculated from resolution plus physical screen size. The formula: PPI = √(width² + height²) / diagonal inches.
Same resolution, different screen size = different PPI = different conversion output. This trips people up constantly.
|
Screen |
Resolution |
Calculated PPI |
|---|---|---|
|
27-inch monitor |
1920×1080 (Full HD) |
~81 PPI |
|
27-inch monitor |
2560×1440 (QHD) |
~108 PPI |
|
32-inch monitor |
3840×2160 (4K) |
~137 PPI |
|
13-inch laptop |
1920×1080 |
~169 PPI |
|
MacBook Pro 14-inch |
3024×1964 |
254 PPI (Apple) |
|
iPhone 17 |
— |
460 PPI (2025) |
ExportKit's global resolution data (September 2025) shows 1920×1080 (Full HD) is the most common desktop resolution worldwide at 19.13% of users. But that same resolution produces a PPI of ~81 on a 27-inch screen versus ~169 on a 13-inch laptop screen.
This is exactly why a converter needs your PPI input, not just your resolution. Resolution alone is not enough data to produce an accurate inch-to-pixel result.
A 27-inch 1080p monitor has a PPI of roughly 81.6. A 27-inch QHD (1440p) monitor bumps that to approximately 108.8. Both are the same physical screen size. The resolution difference alone changes every inch-to-pixel calculation.
Print and web use completely different PPI baselines. Getting this wrong causes one of the most common design handoff problems.
Web standard: 96 PPI (W3C CSS specification, enforced across all browsers).
Print standard: 300 PPI for high-quality output. 150 PPI for draft or low-resolution print.
The same 3-inch element produces 288px at 96 PPI (web) and 900px at 300 PPI (print). Paste that 900px value directly into a CSS file targeting a 96 PPI screen and you've just made your element 9.375 inches wide instead of 3.
Adobe Photoshop lets you set document dimensions in inches with a defined PPI. Changing the PPI in Photoshop resamples the canvas, which changes the pixel dimensions of every element. This is the exact scenario where using print-spec assets in web projects causes layout breaks.
Workflow fix: Establish the output medium before converting. Web output: set PPI to 96. Print output: set PPI to 300. Never mix the two without recalculating.
One real example of how this breaks in practice: a designer exports a 2-inch banner graphic from a 300 PPI print document (600px) and drops it into a CSS layout expecting 192px (2 inches × 96 PPI). The banner renders at 6.25 inches wide on the web page instead of 2.
Separate source files for print and screen. That's the only clean fix.
At the 96 PPI web standard, these are the values that come up constantly in CSS, design systems, and UI component specs:
|
Inches |
CSS Pixels |
|---|---|
|
0.25 |
24px |
|
0.5 |
48px |
|
0.75 |
72px |
|
1 |
96px |
|
1.5 |
144px |
|
2 |
192px |
|
3 |
288px |
|
4 |
384px |
|
5 |
480px |
These numbers show up in real projects more than any others. Standard header heights in CSS frameworks cluster around 48px to 64px (0.5–0.67 inches). Icon sizing in UI systems like Google Material Design and Apple Human Interface Guidelines defaults to 24px (0.25 inch) for base icon sizes and 48px for touch targets.
Why these specific values repeat: They sit on a base-8 grid. Most design systems use 8px or 4px as the base spacing unit, and the inch-to-pixel ratio at 96 PPI divides cleanly into those grids. 96px = 12 × 8px. 48px = 6 × 8px. 24px = 3 × 8px.
For related unit conversions in CSS, the PX to PT converter and PX to REM converter both use 96 PPI as their base for screen calculations.
StatCounter data (2025) shows mobile devices account for over 64% of global web traffic. Mobile screens typically run at 2x or 3x DPR, which means these common web pixel values map to 192px or 288px of physical pixels on most phones. The CSS value stays the same. The physical pixel count behind it doubles or triples.
To go the other direction, the PX to Inches converter handles the reverse calculation using the same 96 PPI baseline.
Design tools each make different assumptions about PPI at export, and getting that setting wrong is where most print-to-digital handoff problems start.
Figma holds 40.65% of the design tools market as of 2025 (SQ Magazine), making its pixel behavior the most relevant for most teams.
|
Tool |
Default PPI |
Unit System |
Export multipliers |
|---|---|---|---|
|
Figma |
72 PPI (export default) |
Pixels only |
1x, 2x, 3x |
|
Adobe Photoshop |
User-defined at setup |
Pixels or inches |
Via Image Size dialog |
|
Adobe Illustrator |
72 PPI (legacy) |
Points and pixels |
Via Export As |
|
Sketch |
Points (1pt = 1px at 1x) |
Points |
@1x, @2x, @3x |
Figma works exclusively in pixels on the canvas.
By default, assets exported from Figma have a DPI of 72 (confirmed by Figma's community manager, June 2024). Exporting at 2x sets DPI to 144. Exporting at 3x sets DPI to 216.
For web design, this does not matter. Screens ignore DPI metadata and render by pixel count.
For print output, the DPI value does matter, and Figma's 72 DPI default produces results that disappoint most printers. The workaround most teams use is exporting at a higher multiplier to increase pixel count, then setting the intended print dimensions in a separate tool.
Photoshop is the only major tool that lets you define PPI at document creation. You set the PPI when creating a new document, and every inch measurement flows from that value.
Adobe's print guidelines confirm 300 PPI as the industry standard for high-quality print output.
Changing PPI in an existing Photoshop document via Image Size resamples the canvas, redistributing pixels. Changing PPI without checking "Resample" preserves pixel count but changes physical dimensions. Designers mix these up constantly, producing assets at wrong sizes.
Adobe Illustrator defaults to 72 PPI, inherited from its typographic origins where 72 points = 1 inch.
The Illustrator community (Adobe forums) confirms: changing the default 72 PPI to 300 PPI before exporting is not directly possible via a global preference. The standard workaround is setting document dimensions in inches, then exporting via "Export for Screens" and handling the PPI in Photoshop post-export.
Illustrator is vector-based, so the PPI issue only affects raster effects (drop shadows, image embeds) and final export resolution.
Sketch uses points (pt) as its canvas unit, where 1pt = 1px at 1x.
Export multipliers (@1x, @2x, @3x) determine the physical pixel output. A 96pt element exports as 96px at @1x, 192px at @2x, and 288px at @3x. The PPI of the resulting file is 72 at @1x, 144 at @2x.
Sketch does not expose a PPI setting in the canvas. The assumption is always 1pt = 1 screen pixel, which aligns with the 96 PPI CSS standard when designing at 1x for standard screens and exporting at 2x for Retina.
CSS has a built-in in unit. It converts automatically. 1in = 96px in every browser that renders to screen, with no setup required.
The full set of equivalent CSS absolute units (per W3C/Codrops):
1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px
All five are identical in screen rendering. The browser treats all of them as equal to 96px for display output.
in Unit Is Actually UsefulMost web developers never use in in screen CSS. Pixels and rems dominate responsive layouts.
The in unit becomes genuinely useful in one specific context: print stylesheets (@media print).
In print mode, CSS maps physical units to real measurements. 1in in a print stylesheet renders as a true physical inch on paper. This is why print stylesheet margins are commonly written as margin: 1in rather than a pixel value.
@media print {
@page {
margin: 1in;
}
}
On screen, that same 1in renders as 96px regardless of the physical display's PPI. WebPlatform Docs confirms that a 96px element and a 1in element are always exactly the same width on screen, no matter which device renders them.
in UnitNo browser renders 1in as a physical inch on screen. Chrome, Firefox, Safari, and Edge all convert 1in to 96px for screen rendering. This behavior is consistent across all current browser versions.
The W3C CSS spec classifies in, cm, mm, pt, and pc as absolute units that are "not recommended for screen use" W3.org. They map to physical measurements only in print output.
MDN Web Docs notes that window.devicePixelRatio returns 1 for a classic 96 DPI display and 2 for HiDPI/Retina, confirming the screen rendering model is DPR-based, not PPI-based.
For converting between CSS units programmatically, the EM to PX converter and REM to PX converter follow the same 96 PPI baseline.
Wrong inch-to-pixel conversions cause 4 specific, visible problems. Each has a distinct cause and a clean fix.
Print PPI (300) used for web output is the most common error in print-to-digital workflows.
A 3-inch element at 300 PPI = 900px. That same 3-inch element at 96 PPI = 288px. Drop the 900px value into a web layout expecting 288px and the element renders at 9.375 inches wide instead of 3.
Fix: set output medium first, then choose PPI. Web = 96 PPI. Print = 300 PPI.
Standard web images are exported at 1x (96 PPI equivalent). On a Retina display with DPR of 2, the browser scales those images up by 2x, producing visible blurring.
MDN confirms: a <canvas> appears blurry on Retina screens when rendered at CSS pixel dimensions without accounting for DPR.
The fix is srcset with density descriptors:
<img src="image.png" srcset="[email protected] 2x, [email protected] 3x">
Web.dev confirms this is the standard solution: create images at 2x and 3x the CSS pixel size, then let the browser select based on DPR.
CSS pixels and physical pixels are not interchangeable on any modern high-density display.
A 96px CSS element on a 2x Retina display uses 192 physical pixels behind the scenes. If a developer calculates a layout using physical pixel counts from device specs instead of CSS pixel counts, every element ends up half the intended size visually.
Fix: always design and specify in CSS pixels for web output. Use physical pixel counts only when exporting assets or working with device hardware specs directly.
Converting 1 inch to 96px and hardcoding that into a fluid layout breaks on any screen narrower than the fixed value.
On screens narrower than 96px wide (older mobile browsers, embedded displays), a width: 96px element may overflow its container. On wider screens, the element stays at 96px while surrounding content scales, creating visual proportion breaks.
Fix: use max-width with percentage fallbacks, or switch to relative units (rem, vw) for responsive layout dimensions. Reserve fixed pixel values for UI elements with explicit sizing requirements.
3 inputs, 1 output. That's the full model.
Required inputs:
Inch value (the measurement you want to convert)
PPI setting (96 for web, 300 for print, or your device's actual PPI)
Output type (CSS pixels for screen, physical pixels for hardware calculations)
Output: Pixels = Inches × PPI
Always verify a converter's output manually: multiply the inch value by the PPI setting. If the converter returns 192px for 2 inches, the PPI it used was 96. If it returns 600px, the PPI was 300.
The most common trap: a converter that only accepts one PPI value and defaults to 72.
Figma exports at 72 DPI by default. A converter locked to 72 PPI will produce values that don't match either the CSS standard (96 PPI) or print requirements (300 PPI). If the converter you're using doesn't show which PPI it assumes, run a test: enter 1 inch and check if the output is 72, 96, or 300.
For related conversions using the same 96 PPI web baseline:
CM to PX converter for metric measurements
MM to PX converter for millimeter inputs
PT to PX converter for typographic point conversions
PX to EM converter for CSS relative unit conversions
96 PPI is a CSS logical baseline, not a physical screen measurement. Most modern monitors don't run at exactly 96 PPI.
A 27-inch 1080p monitor runs at approximately 81 PPI. A 13-inch laptop at 1080p runs at ~169 PPI. Neither matches the 96 PPI CSS standard, and that's by design. Browsers compensate via the device pixel ratio so CSS elements appear at the right visual size regardless.
When to use your actual device PPI instead of 96:
Calculating how many physical pixels a printed element will occupy on a specific screen
Sizing assets for a display hardware specification (not web design)
Working with Android's density-independent pixel (dp) unit, where the baseline is 160 PPI rather than 96
For web design, the answer is almost always 96 PPI. For print, it's 300 PPI. For device hardware work, use the manufacturer's stated PPI.
The DPI guide covers the distinction between PPI (screen measurement) and DPI (print measurement) in detail, since the two terms are regularly confused even in professional contexts.
At the web standard of 96 PPI, 1 inch equals 96 pixels.
At 72 PPI (legacy print), 1 inch equals 72px. At 300 PPI (high-quality print), 1 inch equals 300px. The result always depends on the PPI value you're working with.
Yes. The W3C CSS specification fixes 1in = 96px for screen rendering.
Every browser, including Chrome, Firefox, Safari, and Edge, applies this conversion. The physical PPI of your monitor does not change this. It's a logical unit, not a hardware measurement.
PPI (pixels per inch) measures pixel density on a screen. DPI (dots per inch) measures ink dot density in print output.
Both describe resolution, but in different contexts. Use PPI for screen and digital design. Use DPI when preparing files for physical printing.
Most likely a device pixel ratio issue.
On Retina and HiDPI displays, 1 CSS pixel maps to 2 or 3 physical pixels. A 96px element on a 2x screen uses 192 physical pixels. The CSS value is correct. The physical pixel count is higher.
Use 96 PPI for all web and screen design work.
This matches the W3C CSS reference pixel standard. It's the baseline every browser uses to render CSS length units. For responsive layouts, this value keeps your measurements consistent across devices.
Use 300 PPI for high-quality print output.
150 PPI works for draft or low-resolution print. Never use the web standard of 96 PPI for print files. The pixel count will be too low, and printed output will look soft or pixelated at normal viewing distance.
Figma works in pixels only. There is no canvas PPI setting.
Multiply your inch value by 96 to get the CSS pixel equivalent, then enter that number directly. For Retina-ready exports, design at 1x pixel dimensions and export at 2x or 3x multipliers.
Yes. CSS supports the in unit natively, and 1in renders as 96px on any screen.
It's valid but uncommon in responsive design. The main practical use is in @media print stylesheets, where 1in maps to a real physical inch on paper output.
Screen resolution alone does not determine the conversion. PPI does.
Two monitors with the same 1920×1080 resolution but different screen sizes have different PPI values. A 24-inch 1080p monitor sits at ~92 PPI. A 13-inch 1080p laptop screen runs at ~169 PPI. Same resolution, different pixel density.
Usually a missing device pixel ratio adjustment.
Images exported at standard 96 PPI CSS dimensions appear blurry on 2x Retina screens because the display upscales them. Export images at 2x or 3x the intended CSS pixel size and serve them using srcset density descriptors to fix this.
Join 28,000+ designers who get curated inspiration, tutorials, and hand-picked free resources every week.
No spam, ever. Unsubscribe with one click.