PX to MM Converter
Convert pixels to millimeters for precise print and digital design
PX to MM Calculator
Pixels (px) are screen-based units, while millimeters (mm) are physical measurement units. The conversion depends on screen resolution (DPI - dots per inch). At the standard resolution of 96 DPI, 1 millimeter equals approximately 3.78 pixels (96 DPI ÷ 25.4 mm/inch).
Conversion Result
Formula: Millimeters = Pixels × (25.4 ÷ DPI)
Example: 96px × (25.4 ÷ 96) = 25.4mm
DPI Comparison
See how this value converts at different screen and print resolutions:
| Resolution Type | DPI | Pixel Value | Millimeter Value |
|---|
Batch Converter
Convert multiple pixel values at once. Enter values separated by spaces, commas, or new lines.
Batch Results
| Pixels | Millimeters | CSS Code |
|---|
Common PX to MM Conversions
Reference table for common pixel to millimeter conversions at standard 96 DPI:
| Common Use | Pixels (px) | Millimeters (mm) | CSS Example |
|---|---|---|---|
| Single pixel (hairline) | 1px | 0.26mm | border-width: 0.26mm; |
| Small border | 2px | 0.53mm | border: 0.53mm solid black; |
| Small space | 5px | 1.32mm | padding: 1.32mm; |
| Standard space | 10px | 2.65mm | margin: 2.65mm; |
| Half centimeter | 18.9px | 5mm | padding: 5mm; |
| One centimeter | 37.8px | 10mm | width: 10mm; |
| Photo width (10×15) | 567px | 150mm | width: 150mm; |
| A4 width | 793.8px | 210mm | width: 210mm; |
Frequently Asked Questions
Millimeters (mm) and centimeters (cm) are both metric units of length, with 10mm = 1cm. While they measure the same physical property, they serve different purposes in design:
Millimeters (mm) in Design
- Precision Work - Millimeters offer greater precision for detailed design elements
- Typography - Type sizes, leading, and kerning are often specified in mm for fine control
- Small Elements - Borders, margins, padding, and small design components
- Technical Drawings - Engineering and architectural details
Centimeters (cm) in Design
- Larger Layouts - Page dimensions, column widths, and overall layout measurements
- Client Communication - More intuitive for discussing designs with non-technical stakeholders
- General Spacing - Broader spacing and positioning of larger elements
- Print Specifications - Common for defining paper sizes (e.g., A4 is 21cm × 29.7cm)
CSS usage example:
/* Fine details in millimeters */
p {
font-size: 4mm;
line-height: 6mm;
letter-spacing: 0.2mm;
}
/* Larger layout elements in centimeters */
.container {
width: 18cm;
margin: 2cm;
}
.column {
width: 8.5cm;
padding: 1cm;
}
Choose the unit that best matches the scale of what you're designing. For precise, small-scale work, use millimeters. For larger layout elements, centimeters often provide more intuitive measurements.
The choice between millimeters and pixels depends on your design context and intended output:
Use Millimeters When...
- Designing for Print - When creating designs for physical media like brochures, packaging, business cards, or posters
- Working with Physical Products - For designs that will be fabricated or manufactured
- Cross-Media Projects - When your design will appear in both digital and print formats
- Precision Typography - For fine control over type sizes and spacing in print
- Print Stylesheets - When creating web stylesheets specifically for print output
Use Pixels When...
- Web-Only Design - When creating designs exclusively for screen display
- UI/UX Design - For user interfaces and digital experiences
- Responsive Layouts - When designs need to adapt to different screen sizes
- Digital Graphics - For images and graphics that will only be viewed on screens
- Working with Developers - When handing off designs to web developers
Example workflow for a cross-media project:
- Design print materials in mm for accurate physical dimensions
- Design screen-only elements in px for optimal digital display
- Convert shared elements between units as needed
- Use media queries to apply appropriate units:
@media screen { .content { width: 800px; } } @media print { .content { width: 180mm; } }
Remember that millimeters will display at approximately the correct physical size when printed, but their display size on screen can vary based on the device's DPI and browser settings. Always test print output to confirm physical dimensions.
The precision of pixel to millimeter conversion depends on several factors that affect the relationship between screen and physical measurements:
Factors Affecting Conversion Precision
- DPI Accuracy - Knowing the actual DPI of the device, not just the nominal value
- Screen Calibration - How well the screen is calibrated to render physical measurements
- Operating System Scaling - Display scaling settings that affect how pixels are rendered
- Browser Implementation - Different browsers may interpret physical units slightly differently
- Output Device - Printer calibration and quality will affect final printed dimensions
Typical Precision Levels
- Digital Design Phase - On screen, millimeter precision can vary by ±5-10%
- Consumer Printers - Precision typically within ±3-5% of intended dimensions
- Professional Printing - Can achieve precision within ±1-2% with proper calibration
- High-Precision Work - For applications requiring extreme precision, calibrated equipment and test prints are essential
Real-world example:
A line specified as 10mm in CSS might measure:
- 9.5mm to 10.5mm when printed on a consumer printer
- 9.8mm to 10.2mm when printed professionally
- Appear visually as anywhere from 9mm to 11mm on different screens
For the most precise conversion, it's recommended to calibrate your specific devices. For screens, measure a displayed ruler against a physical one. For printers, print test patterns with known dimensions and measure the output.
Millimeters are widely used in design for various standard measurements and specifications:
Typography Measurements
| Element | Typical Range (mm) | Common Value |
|---|---|---|
| Body Text Size | 2.5mm - 3.5mm | 3mm (≈ 9pt) |
| Line Height (Leading) | 3.5mm - 5mm | 4.2mm (≈ 12pt) |
| Letter Spacing (Tracking) | 0.1mm - 0.5mm | 0.2mm |
| Paragraph Spacing | 3mm - 6mm | 4mm |
Layout Elements
| Element | Typical Range (mm) | Common Value |
|---|---|---|
| Page Margins | 10mm - 25mm | 15mm |
| Column Gutters | 4mm - 10mm | 5mm |
| Border Width | 0.25mm - 2mm | 0.5mm |
| Grid Baseline | 4mm - 6mm | 4.2mm |
Common Print Sizes
| Item | Dimensions (mm) |
|---|---|
| Business Card | 85mm × 55mm |
| Standard Photo | 100mm × 150mm |
| A4 Paper | 210mm × 297mm |
| A5 Paper | 148mm × 210mm |
| US Letter | 215.9mm × 279.4mm |
When working with millimeters in design, it's helpful to have a physical ruler or gauge for reference. This allows you to visualize actual sizes and make more informed design decisions, especially for print projects.
About Millimeter Units
The millimeter (mm) is a unit of length in the metric system, equal to one thousandth of a meter. In digital and print design, it serves as a precise physical unit of measurement.
Key Facts About Millimeters
-
Metric Standard: 1 millimeter = 0.1 centimeter = 0.001 meter
-
Imperial Equivalent: 1 millimeter = 0.03937 inches
-
Digital Conversion: At standard screen resolution (96 DPI), 1 millimeter ≈ 3.78 pixels
-
Precision Measurement: Used for fine details in typography, design, and manufacturing
Millimeters are supported in CSS using the 'mm' unit and are particularly useful for print stylesheets where precise physical dimensions are needed.
CSS Usage Examples
Millimeter units in CSS are primarily used for print-specific stylesheets and precise typography:
/* Print-specific styles using millimeters */
@media print {
/* Page setup */
@page {
margin: 20mm; /* Standard print margin */
}
/* Typography */
body {
font-size: 3mm; /* Standard body text size */
line-height: 4.5mm;
}
h1 {
font-size: 8mm; /* Large heading */
margin-bottom: 5mm;
}
h2 {
font-size: 6mm; /* Medium heading */
margin-bottom: 4mm;
}
h3 {
font-size: 4mm; /* Small heading */
margin-bottom: 3mm;
}
/* Layout elements */
.content {
width: 170mm; /* Width for A4 with margins */
}
/* Precise spacing */
p {
margin-bottom: 3mm;
}
.column {
padding: 2mm;
margin-right: 5mm;
}
/* Fine borders */
table td {
border: 0.5mm solid #000;
padding: 2mm;
}
/* Letter spacing */
.headline {
letter-spacing: 0.2mm;
}
}Millimeters excel for detailed typography work and precise layouts. Use them when you need fine control over physical dimensions, especially in print design.