The Complete Technical Guide to Centimeters to Pixels Conversion in Web Design & Printing
Converting physical real-world metric dimensions (centimeters and millimeters) into digital display units (pixels) is an essential workflow across graphic design, web layout, digital photography, and commercial pre-press printing. Because a pixel has no fixed physical size on its own, translating centimeters into pixels requires an anchor metric: Resolution, expressed as Dots Per Inch (DPI) or Pixels Per Inch (PPI).
Exactly 1 inch = 2.54 centimeters. Dividing centimeters by 2.54 converts the length to inches before applying the DPI multiplier.
The W3C defines 1 CSS inch as 96 CSS pixels. Consequently, 1 cm = 37.795px across all modern desktop and mobile web browsers.
For magazines, brochures, and photographs viewed at arm's length, 300 DPI represents the threshold of human visual acuity without dot perception.
The Mathematical Conversion Formula
To convert centimeters (cm) to pixels (px), use the following formula:
Conversely, to convert pixels back into physical centimeters:
Example: Converting 10 cm to Pixels at 300 DPI (Print)
- Convert centimeters to inches:
10 cm / 2.54 = 3.937 inches - Multiply by the print resolution (300 DPI):
3.937 × 300 = 1181.1 pixels - Result: A 10 cm line requires 1,181 pixels in high-resolution printing.
DPI vs. PPI: Clarifying the Terminology
While often used interchangeably in graphic editing applications, DPI and PPI represent two distinct physical concepts:
- PPI (Pixels Per Inch): Measures the number of digital square pixels displayed per linear inch on a computer screen, smartphone, or camera sensor. It dictates display sharpness and UI scaling.
- DPI (Dots Per Inch): Measures the number of physical microscopic ink droplets sprayed onto paper by a commercial printing press or inkjet printer. Modern printers often spray 1,200 to 2,400 physical ink dots to reproduce a 300 PPI image accurately.
International ISO 216 Paper Sizes (CM to PX at 300 DPI & 96 DPI)
The ISO 216 international paper standard maintains a constant aspect ratio of 1:√2 (1:1.414). When creating artwork in Figma, Photoshop, or InDesign, referencing standard pixel dimensions prevents raster distortion:
| Format Name | Dimensions (cm) | Dimensions (Inches) | Pixels @ 300 DPI (Print) | Pixels @ 96 DPI (Web) |
|---|---|---|---|---|
| A3 Sheet | 29.7 × 42.0 cm | 11.7 × 16.5 in | 3508 × 4960 px | 1123 × 1587 px |
| A4 Standard | 21.0 × 29.7 cm | 8.3 × 11.7 in | 2480 × 3508 px | 794 × 1123 px |
| A5 Booklet | 14.8 × 21.0 cm | 5.8 × 8.3 in | 1748 × 2480 px | 559 × 794 px |
| A6 Postcard | 10.5 × 14.8 cm | 4.1 × 5.8 in | 1240 × 1748 px | 397 × 559 px |
| US Letter | 21.59 × 27.94 cm | 8.5 × 11.0 in | 2550 × 3300 px | 816 × 1056 px |
| US Legal | 21.59 × 35.56 cm | 8.5 × 14.0 in | 2550 × 4200 px | 816 × 1344 px |
| Passport Photo | 3.5 × 4.5 cm | 1.38 × 1.77 in | 413 × 531 px | 132 × 170 px |
| Business Card | 8.5 × 5.5 cm | 3.35 × 2.17 in | 1004 × 650 px | 321 × 208 px |
High-DPI, Retina Displays & Device Pixel Ratio (DPR)
Modern smartphones, tablets, and 4K/5K monitors feature pixel densities exceeding 300 to 450 PPI. To prevent web pages and buttons from shrinking to microscopic sizes on these screens, operating systems implement a Device Pixel Ratio (DPR):
- Standard Screens (1x DPR): 1 CSS pixel corresponds to exactly 1 physical hardware pixel.
- Apple Retina Screens (2x DPR): 1 CSS pixel is rendered using 4 physical hardware pixels (2 × 2 grid).
- Ultra HD Flagship Phones (3x DPR): 1 CSS pixel is rendered using 9 physical hardware pixels (3 × 3 grid).
When exporting raster graphics (PNG, JPG, WebP) for websites, designers export images at @2x (192 DPI) or @3x (288 DPI) so they appear crisp on Retina displays while using standard CSS pixel layout coordinates.
Frequently Asked Questions (FAQ)
cm length unit (e.g., width: 5cm;). The browser engine computes 5cm = 5 * (96 / 2.54)px = 188.976px, anchoring the calculation to the 96 DPI standard regardless of your monitor's actual physical pixel density.
Pixels = ((mm / 10) / 2.54) * DPI. For example, 50 mm at 300 DPI is (5 / 2.54) * 300 = 590.55 px.