PX to CM Converter
Convert pixels to centimeters for print design and cross-media projects
PX to CM Calculator
Pixels (px) are screen-based units, while centimeters (cm) are physical measurement units. The conversion depends on screen resolution (DPI - dots per inch). At the standard resolution of 96 DPI, 1 centimeter equals approximately 37.8 pixels (96 DPI ÷ 2.54 cm/inch).
Conversion Result
Formula: Centimeters = Pixels × (2.54 ÷ DPI)
Example: 96px × (2.54 ÷ 96) = 2.54cm
DPI Comparison
See how this value converts at different screen and print resolutions:
| Resolution Type | DPI | Pixel Value | Centimeter Value |
|---|
Batch Converter
Convert multiple pixel values at once. Enter values separated by spaces, commas, or new lines.
Batch Results
| Pixels | Centimeters | CSS Code |
|---|
Common PX to CM Conversions
Reference table for common pixel to centimeter conversions at standard 96 DPI:
| Common Use | Pixels (px) | Centimeters (cm) | CSS Example |
|---|---|---|---|
| Small space | 10px | 0.26cm | margin: 0.26cm; |
| Quarter centimeter | 9.45px | 0.25cm | width: 0.25cm; |
| Half centimeter | 18.9px | 0.5cm | padding: 0.5cm; |
| One centimeter | 37.8px | 1cm | margin: 1cm; |
| Small element | 75.6px | 2cm | width: 2cm; |
| Medium element | 189px | 5cm | width: 5cm; |
| Column width | 378px | 10cm | width: 10cm; |
| A4 width (portrait) | 793.8px | 21cm | width: 21cm; |
Frequently Asked Questions
Centimeters and pixels serve different purposes in design, each with specific advantages:
Advantages of Centimeters (CM)
- Physical Consistency - Centimeters represent exact physical measurements regardless of screen resolution or device
- Print Reliability - For print design, centimeters ensure that your designs will match the intended physical dimensions
- Global Standard - As part of the metric system, centimeters are universally understood measurements in most countries
- Cross-Media Consistency - Using centimeters can help maintain consistency between digital and physical versions of your design
When to Use Centimeters
- Print design (brochures, posters, business cards, packaging)
- Layout design requiring exact physical dimensions
- Cross-media projects that will appear both digitally and in print
- When working with international clients using the metric system
- Print stylesheets in web design using
@media print
For web design that will only be viewed on screens, pixels are generally preferred as they provide more consistent results across different devices. Use centimeters primarily for projects with a print component or when physical dimensions are crucial.
The accuracy of pixel to centimeter conversion depends on several factors:
Factors Affecting Conversion Accuracy
- DPI Accuracy - The most important factor is knowing the exact DPI (dots per inch) of the display or output device. Many devices don't precisely match their advertised DPI.
- Device Calibration - Even with the correct DPI value, screens may not be perfectly calibrated to display physical measurements accurately.
- Operating System Scaling - Modern operating systems often scale the display, affecting how pixels relate to physical dimensions.
- CSS Interpretation - Browsers may interpret CSS centimeter units differently, especially across different platforms.
Accuracy Expectations
- Print Output - For print, the conversion can be highly accurate if the correct DPI is specified for the output device.
- Screen Display - On screens, centimeter accuracy is approximate and may vary by 5-10% even with correct DPI settings.
- Cross-Device Consistency - The same centimeter value may display at slightly different physical sizes across different devices.
Real-world example:
Measuring a CSS-defined 5cm box with a physical ruler might show:
- 4.8cm on one monitor
- 5.2cm on another
- Exactly 5.0cm when printed
For maximum accuracy in pixel to centimeter conversion, it's best to verify the actual DPI of your specific device rather than relying on standard values. You can do this by displaying a 1-inch or 1-cm reference on screen and measuring it with a physical ruler.
CSS fully supports centimeters as a unit of measurement. Here's how to use them effectively:
Basic Syntax
Using centimeters in CSS is straightforward - just add the "cm" unit after your value:
width: 10cm; /* Sets width to 10 centimeters */margin: 1.5cm; /* Sets margin to 1.5 centimeters */font-size: 0.5cm; /* Sets font size to 0.5 centimeters */
Best Practices for Using CM in CSS
- Print Stylesheets - Use centimeters primarily in print-specific stylesheets:
@media print {
.content {
width: 18cm; /* Standard A4 width minus margins */
margin: 1.5cm;
}
} - Page Setup - Centimeters are ideal for defining page dimensions and margins:
@page {
size: 21cm 29.7cm; /* A4 page */
margin: 2cm;
} - Combine with Other Units - You can mix centimeters with other units using calc():
width: calc(10cm - 20px);
Browser Support and Limitations
- All modern browsers support centimeter units
- Screen display of centimeters may vary slightly between browsers and devices
- For maximum accuracy, test print output with your specific printer
While centimeters work well for print, they're generally not recommended for screen-only designs. For web content that will never be printed, consider using pixels (px) for fixed sizes or relative units (%, em, rem, vw, vh) for responsive layouts.
When designing for print, it's helpful to know standard paper dimensions in centimeters:
International Paper Sizes (ISO 216)
| Size | Width × Height (cm) | Common Use |
|---|---|---|
| A4 | 21.0 × 29.7 cm | Standard letters, documents (most countries) |
| A5 | 14.8 × 21.0 cm | Notepads, booklets, flyers |
| A3 | 29.7 × 42.0 cm | Posters, larger diagrams, tabloid publications |
| B5 | 17.6 × 25.0 cm | Books, magazines |
North American Paper Sizes
| Size | Width × Height (cm) | Common Use |
|---|---|---|
| Letter | 21.59 × 27.94 cm | Standard documents (USA, Canada) |
| Legal | 21.59 × 35.56 cm | Legal documents |
| Tabloid | 27.94 × 43.18 cm | Newspapers, posters |
Common Business Card and Photo Sizes
| Item | Width × Height (cm) | Region |
|---|---|---|
| Business Card | 8.5 × 5.5 cm | International |
| Business Card | 8.89 × 5.08 cm | North America |
| Standard Photo | 10 × 15 cm | International (4×6 inches) |
When designing for print using centimeters, remember to account for bleed area (typically 0.3cm to 0.5cm extra on each side) and safe margins (usually at least 0.5cm from the edge) to ensure your content isn't cut off during printing and binding.
About Centimeter Units
The centimeter (cm) is a unit of length in the metric system, equal to one hundredth of a meter. In digital and print design, it serves as an absolute physical unit of measurement.
Key Facts About Centimeters
-
Metric Standard: 1 centimeter = 10 millimeters = 0.01 meters
-
Imperial Equivalent: 1 centimeter = 0.3937 inches
-
Digital Conversion: At standard screen resolution (96 DPI), 1 centimeter ≈ 37.8 pixels
-
Print Standard: Widely used for page dimensions and layouts globally
Centimeters are supported in CSS using the 'cm' unit and are most commonly used in print stylesheets where physical dimensions are important.
CSS Usage Examples
Centimeter units in CSS are primarily used for print-specific stylesheets:
/* Print-specific styles using centimeters */
@media print {
/* Page setup */
@page {
size: 21cm 29.7cm; /* A4 page size */
margin: 2cm; /* 2cm margins */
}
/* Main container */
.content {
width: 17cm; /* 21cm page width minus 4cm margins */
padding: 0;
}
/* Headers */
h1 {
font-size: 1cm; /* Large heading */
margin-bottom: 0.5cm;
}
h2 {
font-size: 0.7cm; /* Medium heading */
margin-bottom: 0.3cm;
}
/* Body text */
p {
font-size: 0.4cm; /* Body text size */
line-height: 0.6cm;
margin-bottom: 0.4cm;
}
/* Two-column layout */
.column {
width: 8cm;
margin-right: 1cm;
}
/* Images */
.photo {
width: 10cm;
height: 15cm;
}
/* Avoid page breaks inside important elements */
h1, h2, figure, table {
page-break-inside: avoid;
}
}For web design, pixels and relative units are generally preferred over centimeters. Use centimeters mainly when creating layouts specifically for print output.