CM to PX Converter

The CM to PX converter transforms centimetre values into pixels instantly, based on the screen DPI you specify. No guesswork. No manual math.

How It Works

Pixels and centimetres are connected through a single formula:

DPI (dots per inch) is the key variable. The same measurement in centimetres will produce a completely different pixel count depending on the screen. A value of 1 cm equals 38 px at 96 DPI but 72 px at 183 DPI. This is why picking the right DPI matters.

When to Use This Tool

• Converting physical print dimensions into screen-ready pixel values
• Matching CSS pixel sizes to real-world measurements in a design brief
• Checking how a layout will render across different screen densities
• Working between design tools that use mixed unit systems

Choosing the Right DPI

Use the presets as a starting point. For anything precise, check your device specs and enter a custom DPI value.

Key Features

• Live results as you type, no button click needed
• DPI comparison table showing all preset values at once
• Copy to clipboard on any result in one click
• Custom DPI input for any screen not covered by presets
• Device reference guide with DPI values for popular phones, tablets, and monitors

Pixel values are always rounded to the nearest whole number. The exact decimal is shown alongside for precision work.

What Is a CM to PX Converter?

A CM to PX converter is a calculation tool that transforms centimeter measurements into pixel values based on screen resolution settings (PPI or DPI). The conversion result is not a fixed number: 1 cm equals 37.795 pixels at 96 DPI, but changes completely depending on the screen density of the target device.

This matters because centimeters are physical, absolute units. A pixel, by contrast, is a digital unit tied to display resolution, not physical space.

You'll find these converters built into standalone web tools, integrated into design software like Figma or Adobe Photoshop, and available as developer utilities for CSS unit translation.

What Is a Pixel in Digital Measurement?

A pixel is the smallest addressable element on a digital display. It has no fixed physical size on its own.

Its actual dimensions depend entirely on the screen's pixel density. A pixel on a 96 PPI monitor is physically larger than a pixel on a 460 PPI iPhone 15 Pro display, even though both are called "1 pixel" in code.

Context	Pixel density	Physical pixel size
Standard desktop monitor	96 PPI	~0.265 mm
Full HD laptop screen	~140 PPI	~0.181 mm
Apple Retina display	220–460 PPI	~0.055–0.115 mm
Offset print output	300+ DPI	Ink dot, not a pixel

Modern smartphones pack over 300 pixels into a single inch, with some devices exceeding 500 PPI (CL Creative, 2024).

What Is a Centimeter in Screen Context?

A centimeter is a fixed physical unit: always 10 mm, always 1/100 of a meter.

On screen, though, it gets complicated. CSS treats 1 cm as exactly 37.7952756 pixels, anchored to the 96 DPI standard inherited from Microsoft's Windows display settings of the 1980s (Smashing Magazine, 2021). That calculation is: 96 px ÷ 2.54 = 37.795 px per cm.

This means a CSS centimeter is not a real physical centimeter on screen. It's a computed value. On a Retina display, that same 1 cm CSS value still renders as ~37.795 CSS pixels, but the browser uses 2–3 physical pixels to draw each of those CSS pixels.

---

What Is the Formula to Convert CM to PX?

The formula to convert centimeters to pixels is: Pixels = Centimeters × (DPI ÷ 2.54). At the web standard of 96 DPI, this means 1 cm equals 37.795 px. The result changes at every DPI value, so knowing your target resolution before converting is necessary.

The divisor 2.54 comes from the relationship between inches and centimeters: 1 inch = 2.54 cm.

Common results at standard DPI settings:

• 96 DPI (web/CSS standard): 1 cm = 37.795 px

• 72 DPI (legacy screen standard): 1 cm = 28.346 px

• 144 DPI (2x Retina): 1 cm = 75.591 px

• 300 DPI (print standard): 1 cm = 118.11 px

Run the formula in reverse to go the other direction. PX to CM conversion uses: Centimeters = Pixels ÷ (DPI ÷ 2.54).

Why 2.54 Is Always the Divisor

The number 2.54 is fixed because 1 international inch equals exactly 2.54 centimeters, a definition standardized in 1933.

DPI (dots per inch) counts how many pixels fit in one inch. To find how many pixels fit in one centimeter, divide DPI by 2.54. That gives you the pixel density per centimeter for any resolution.

Change the DPI, and the px result changes proportionally. Double the DPI, double the pixel output for the same centimeter value.

---

CM to PX Conversion Table by DPI

At 96 DPI (the CSS/browser default), 1 cm = 37.795 px. At 300 DPI (professional print), 1 cm = 118.11 px. The same physical measurement produces completely different pixel values depending on the output resolution, which is why checking DPI before converting is the first step of any cross-media design workflow.

CM	72 DPI (px)	96 DPI (px)	144 DPI (px)	300 DPI (px)
0.5	14.17	18.90	37.80	59.06
1	28.35	37.80	75.59	118.11
2	56.69	75.59	151.18	236.22
5	141.73	188.98	377.95	590.55
10	283.46	377.95	755.91	1181.10
21 (A4 width)	595.28	793.70	1587.40	2480.31

The 96 DPI Web Standard

96 DPI is the default pixel density used by all major web browsers for CSS rendering.

This value traces back to Microsoft's Windows operating system from the 1980s, which set its display standard at 96 pixels per inch. The W3C CSS specification locked this in: 1 CSS inch = 96 CSS pixels, making 1 CSS centimeter = 37.7952756 CSS pixels (W3C CSS Values Module Level 3, 2024).

This is a software definition, not a hardware measurement. A screen may physically display 140 PPI or 220 PPI, but the browser still calculates CSS cm values using the 96 DPI anchor.

Reading the Table for Print Projects

Print projects use 300 DPI as the baseline, so the right column applies.

An A4 sheet (21 × 29.7 cm) at 300 DPI requires a canvas of 2480 × 3508 pixels. At 96 DPI, the same A4 document would only be 794 × 1123 pixels, which is far too low for print output (Printivity, 2024).

Always confirm which DPI column applies before pulling a pixel value from this table.

---

Why Does DPI Change the CM to PX Result?

DPI directly controls how many pixels occupy one inch of screen space. Higher DPI = more pixels packed per inch = larger pixel value for the same centimeter measurement. A 1 cm element on a 96 DPI screen is 37.795 px. That same element on a 300 DPI print canvas becomes 118.11 px, over 3 times larger in pixel count.

The centimeter stays the same. The pixel count scales with density.

Physical vs. CSS Pixels

There are 2 distinct pixel types to understand before converting.

Physical pixels are the actual hardware dots on a screen. Their size is set during manufacturing and measured in PPI. A 27-inch 4K monitor packs 163 physical pixels per inch. The display cannot change this.

CSS pixels are abstract reference units defined by the W3C specification. They're designed to look consistent at arm's length regardless of screen hardware. On a 96 DPI standard display, 1 CSS pixel = 1 physical pixel. On a 2x Retina display, 1 CSS pixel = 2 physical pixels per dimension, so 4 physical pixels total per CSS pixel (MDN Web Docs, 2024).

This is the device pixel ratio (DPR). Understanding it is what separates accurate cm-to-px conversions from ones that look wrong on high-density screens.

Why Web Browsers Default to 96 DPI

Windows computers historically shipped with 96 PPI monitors as the dominant standard. Microsoft built its display rendering around this, and browser vendors followed.

The W3C CSS specification formally defines the reference pixel as the visual angle of 1 pixel on a 96 DPI display at an arm's length of 28 inches (W3C, 2024). That's approximately 0.26 mm per CSS pixel.

The result: all cm values in CSS are calculated against 96 DPI, regardless of what the screen physically displays.

---

What Are the Standard DPI Settings for Web, Print, and Mobile?

The 3 main design contexts each operate at different DPI standards: 96 DPI for web, 300 DPI for professional print, and 144–460+ DPI for mobile and Retina displays. Using the wrong DPI setting when converting cm to px produces element sizes that look correct on one output and completely wrong on another.

Web Design DPI Standards

Web design uses 96 DPI as the CSS reference standard across all major browsers, including Chrome, Firefox, and Safari.

This is a fixed constant in the W3C CSS specification. Regardless of what resolution a monitor physically runs at, the browser computes cm, mm, and inch values in CSS against 96 px per inch (W3C CSS Values Module Level 3, 2024).

Key point: CSS cm units on screen are always anchored to 96 DPI. Using 1cm in a stylesheet produces 37.795 px, always, no matter the screen's physical pixel density.

Print Design DPI Standards

300 DPI is the industry standard for professional print output. At normal reading distance (12–14 inches), the human eye cannot distinguish individual pixels when they're packed at 300 per inch, which is why 300 became the benchmark (Printivity, 2024).

Common print pixel requirements at 300 DPI:

• A4 (21 × 29.7 cm): 2480 × 3508 px

• US Letter (21.59 × 27.94 cm): 2550 × 3300 px

• Business card (8.5 × 5.5 cm): 1004 × 650 px

• Standard bleed adds 75 px per edge at 300 DPI

Files submitted below 300 DPI produce blurry output. Files above 300 DPI increase file size without improving visible print quality (Printivity, 2024).

Mobile and Retina Display DPI Standards

Mobile screens operate at much higher physical pixel densities than desktop monitors.

The iPhone 15 Pro runs at 460 PPI. Most modern Android flagships sit between 400–550 PPI. This creates the device pixel ratio (DPR) gap: a browser still delivers CSS layouts at the 96 DPI reference, but the screen uses 3 physical pixels to render each CSS pixel.

For practical work, this means:

• Design at 1x (96 DPI reference) in CSS

• Export image assets at 2x and 3x for Retina and high-DPI devices

• Use srcset or image-set() to serve the right asset per screen density

---

How to Convert CM to PX in CSS?

In CSS, 1cm always equals 37.795px, fixed by the W3C specification. This value does not change based on screen resolution. The CSS centimeter is a computed unit anchored to 96 DPI, not a physical measurement tied to device hardware.

This creates a specific and often misunderstood behavior: CSS cm values look accurate in print stylesheets but produce unreliable physical sizes on screen.

Using CM Units in CSS Stylesheets

CSS supports the cm unit directly. You can write width: 5cm; and browsers will interpret it as 188.976 px.

/* This renders as 188.976px in all browsers */
.element {
  width: 5cm;
}

/* Equivalent explicit pixel value */
.element {
  width: 188.976px;
}

The conversion is always: px = cm × 37.795.

Most front-end developers avoid cm in screen stylesheets. The unit produces the same pixel output on every screen, ignoring actual physical screen density. A 5 cm element looks physically larger on a low-DPI monitor and smaller on a high-DPI display, the opposite of what a physical centimeter measurement would suggest.

When CM Units Work in CSS

The cm unit is reliable in CSS only inside @media print rules.

Print stylesheets map CSS absolute units directly to physical dimensions on paper. A 1cm value in a print stylesheet produces an actual 1 cm measurement on the printed page.

@media print {
  .invoice-header {
    width: 21cm;    /* Matches A4 page width exactly */
    margin: 2cm;
  }
}

For screen layouts, use px, rem, or em instead. These units handle responsive design and accessibility scaling far better than cm or other absolute CSS units (W3C Style Guide, 2024).

For reference, the PX to EM and PX to REM conversions are the more common calculations in modern CSS workflows.

---

How Do Design Tools Handle CM to PX Conversion?

Figma, Adobe Photoshop, Illustrator, and Canva each handle CM to PX conversion differently, with the conversion result depending on the document's DPI or export resolution setting. Figma works exclusively in pixels internally, while Photoshop and Illustrator let you set canvas dimensions in centimeters and apply DPI directly.

CM to PX in Figma

Figma operates in pixels only. There is no native cm input for frame or element dimensions.

To work in centimeters inside Figma, designers install unit converter plugins from the Figma Community. Plugins like "Units to Pixels" and "Advanced Units Converter" accept cm input and apply a chosen DPI (typically 96 for screen or 300 for print) to produce the correct pixel frame size.

Practical workflow for print work in Figma:

• Install a cm-to-px converter plugin

• Input physical dimensions in cm

• Set DPI to 300 for print output

• Plugin creates a pixel-dimensioned frame matching those print specs

The DPI setting inside each Figma plugin varies. Checking which DPI a plugin uses before converting avoids inconsistent pixel outputs across projects (Pttrns, 2024).

CM to PX in Adobe Photoshop and Illustrator

Photoshop handles cm-to-px conversion natively during document setup.

When creating a new document, you set width and height in centimeters, then specify a resolution in PPI. Photoshop calculates the pixel canvas automatically. A 21 × 29.7 cm canvas at 300 PPI produces a 2480 × 3508 px document, the standard A4 print size.

Illustrator works differently. Artboards accept cm input, but the export resolution determines the final pixel dimensions. A 10 cm wide artboard exported at 96 PPI produces 378 px. The same artboard exported at 300 PPI produces 1181 px.

Tool	CM input	DPI control	Pixel output method
Figma	Plugin only	Plugin setting	Frame dimensions
Photoshop	New document dialog	PPI field	Canvas pixel size
Illustrator	Artboard settings	Export dialog	Export pixel size
Canva	Print templates only	Template-defined	Auto-calculated

Canva applies cm dimensions in its print-specific templates (business cards, flyers, posters) but abstracts the DPI setting from the user. The platform handles the cm-to-px math internally when generating print-ready PDF exports.

What Is the Difference Between PX, PT, and CM in Design?

At 96 DPI, the 3 units convert as: 1 cm = 37.795 px = 28.346 pt. Each unit comes from a different era of design. Pixels belong to screen technology, points to print typography, and centimeters to physical layout. Using the wrong unit for the wrong medium is the most common source of dimension errors in mixed-media workflows.

Unit	Origin	Screen use	Print use	1 unit at 96 DPI
px	Digital screens	Standard	Functional	1 px
pt	Print typesetting	Avoid	Typography	1.333 px
cm	Physical measurement	@media print only	Layout dimensions	37.795 px

PX: The Screen Standard

Pixels are the default unit for all screen design. Every browser, every CSS framework, every design tool with a screen output mode works in pixels first.

Key behavior: On a standard 96 DPI display, 1 CSS px = 1 physical pixel. On a 2x Retina display, 1 CSS px = 4 physical pixels (2x2 grid), which is why Retina content looks sharper without the layout changing size (MDN Web Docs, 2024).

Use px for borders, component dimensions, and fixed UI elements. Switch to rem or em for typography and spacing that should scale with user browser preferences.

PT: The Print Typography Unit

1 pt = 1/72 of an inch = 1.333 px at 96 DPI.

Points originated in metal typesetting and remain the dominant unit for type specifications in print workflows. Adobe InDesign, Illustrator, and Photoshop all default to pt for font size. Body text in print typically runs 10–12 pt. Display headings start at 24 pt (Design Your Way, 2025).

Where pt breaks down: On screen, pt values are less predictable than px. CSS treats 1 pt as 1.333 px, but this fixed ratio means pt doesn't adapt to screen density the way relative units do.

CM: Physical Layout Measurement

Centimeters are reliable for print layout dimensions and physical product specifications. Unreliable for screen layouts.

The W3C CSS specification abandoned the requirement for browsers to render cm accurately on screen in 2011. Since then, CSS cm maps to 37.795 px at 96 DPI as a computed value, not a physically accurate measurement (W3C, 2021).

Bottom line: Use cm to define artboard dimensions and physical product mockups. Convert to px before handing off screen assets. The PT to PX and PT to CM converters handle the adjacent calculations when moving between print and screen specs.

---

Common CM to PX Conversions for Web and Print

At 96 DPI, 1 cm = 37.795 px. At 300 DPI (print), 1 cm = 118.11 px. These 2 values cover the majority of practical conversion needs: screen design at the CSS standard, and professional print output at the commercial offset press standard.

Quick Reference for Screen Design (96 DPI)

The values below apply to all CSS screen work and match what browsers compute natively for cm units.

• 0.5 cm = 18.898 px

• 1 cm = 37.795 px

• 2 cm = 75.591 px

• 5 cm = 188.976 px

• 10 cm = 377.953 px

These px values are what Figma plugins, online unit calculators, and the MM to PX converter all produce at the 96 DPI default.

Common Print Sizes in PX at 300 DPI

300 DPI is the standard for commercial offset printing, confirmed by the ISO 12647-2:2013 halftone screen ruling standard.

Document	CM dimensions	PX at 300 DPI
A4	21 × 29.7 cm	2480 × 3508 px
US Letter	21.59 × 27.94 cm	2550 × 3300 px
Business card	8.5 × 5.5 cm	1004 × 650 px
A5	14.8 × 21 cm	1748 × 2480 px

Standard bleed in print adds 3 mm (0.3 cm) per edge, which equals 35 px per edge at 300 DPI. Always add bleed px to the base canvas size before exporting print-ready files (Printivity, 2024).

---

How to Use an Online CM to PX Converter?

An online CM to PX converter requires 2 inputs: a centimeter value and a DPI setting. The DPI field is the one most people ignore, which is also the one that determines whether the result is correct for the intended output.

Getting those 2 inputs right takes about 10 seconds. Getting the DPI wrong produces pixel values that are off by a factor of 3 or more.

What to Enter in Each Field

CM value: The physical measurement you want to convert. Can be a decimal (1.5 cm, 0.75 cm).

DPI setting: This depends entirely on the output destination:

• Screen layouts and CSS work: 96 DPI

• Standard print (brochures, flyers, business cards): 300 DPI

• High-detail print (art books, fine packaging): 400–600 DPI

• Large-format prints viewed from distance: 72–150 DPI

Most converters default to 96 DPI. If the target is print, change this before reading the result.

Checking the Output

One common mistake: accepting a rounded result when the design needs sub-pixel precision.

At 96 DPI, 1 cm = 37.7952756 px. Most converters round this to 37.80 or 38. For a browser stylesheet, rounding is fine. For a print canvas in Photoshop, use the full decimal value to avoid cumulative dimension errors across a multi-page layout.

Also worth cross-checking: the Inch to PX converter produces consistent results when working with measurements already in imperial units. For the reverse calculation, PX to MM handles millimeter output directly.

---

When Should You Use CM Instead of PX in Design?

Use cm when the output is physical. Use px when the output is a screen. That's the core rule, and most cm-to-px errors come from applying one to the other's context.

Mismatched PPI parameters between digital design files and print output are one of the most common causes of print size deviations from expectations (Toolkk, 2024).

Projects That Require CM Input

Print-first work always specifies dimensions in physical units.

• Packaging design: Dielines require cm or mm for die-cut accuracy

• Signage and banners: Physical installation demands real-world measurements

• Business cards, flyers, brochures: Print vendors specify trim sizes in cm

• Book layout: Page dimensions set in cm, type in pt

For these workflows, enter cm dimensions into the design tool, set 300 DPI, and let the pixel canvas calculate automatically. Adobe InDesign handles this natively. Figma needs a plugin.

Projects Where PX Outperforms CM

Screen design, full stop. Mobile browsing accounts for over 60% of all web traffic worldwide (Hobo Web, 2025), and every CSS framework in use targets px as the base unit.

CSS cm units on screen produce the same pixel output regardless of actual screen density. A component set at 5cm looks physically larger on a low-DPI monitor and smaller on a Retina display. That's the opposite of what responsive design needs.

Use px for fixed elements, rem for scalable typography, and vw/vh for viewport-relative layouts. Reserve cm for @media print rules only (W3C Style Guide, 2024).

---

What Are the Most Common Errors in CM to PX Conversion?

4 errors cause the vast majority of cm-to-px problems: using 96 DPI for print work, ignoring device pixel ratio on high-density screens, rounding pixel values in print layouts, and applying CSS cm units to screen stylesheets expecting physical accuracy.

Each produces a different failure mode. Knowing which error you made tells you exactly how to fix it.

Using 96 DPI for a Print Project

This is the most damaging error. A designer sets up a brochure at 96 DPI, converts cm dimensions to px, and the canvas ends up at roughly one-third the pixel count needed for print quality.

An A4 page at 96 DPI = 794 × 1123 px. The same page at 300 DPI = 2480 × 3508 px. Submitting the 96 DPI file to a print vendor produces blurry output, because professional presses use 150 LPI halftone screening and require images at 2x that ruling, which is 300 PPI minimum (PrintNinja, 2022).

Always confirm the DPI setting before converting any cm value for print output.

Ignoring Device Pixel Ratio on Retina Screens

CSS pixel values look correct on standard displays and blurry on high-DPI screens when image assets aren't scaled.

A 200 × 200 px image on a device with DPR 2 gets stretched across a 400 × 400 physical pixel area. The browser upscales it, and the result is visibly soft (ImageKit, 2024). The fix: export image assets at 2x and 3x sizes and use srcset to let the browser select the right version per screen density.

DPR values by device type:

• Standard desktop monitor: DPR 1.0

• MacBook Retina: DPR 2.0

• iPhone 14 Pro: DPR 3.0

• Samsung Galaxy S flagships: DPR 2.5–4.0

Rounding Pixel Values in Multi-Page Print Layouts

Single-page layouts absorb rounding errors without visible problems. Multi-page layouts compound them.

1 cm at 300 DPI = 118.1102 px. Round that to 118 px and the error per centimeter is 0.11 px. Across a 10-page A4 document with 2 cm margins, that's a cumulative misalignment of over 4 px per edge. Use full decimal precision for print canvas dimensions.

Applying CM Units to Screen Stylesheets

CSS abandoned physically accurate cm rendering on screen in 2011. Since then, 1cm in a screen stylesheet always resolves to 37.795 px, regardless of actual screen resolution.

A 5cm element looks physically larger on a 72 PPI monitor than on a 220 PPI laptop. That makes cm useless for responsive screen layouts. Use it only inside @media print rules, where physical accuracy is restored. For all screen layout work, the EM to PX and REM to PX converters are the more applicable tools.

FAQ on CM to PX Converters

How many pixels is 1 cm?

At the web standard of 96 DPI, 1 cm equals 37.795 pixels.

At 300 DPI (print), 1 cm equals 118.11 px. The result always depends on the DPI setting, so confirm your target resolution before converting.

What is the formula to convert cm to px?

The formula is: Pixels = Centimeters × (DPI ÷ 2.54).

The 2.54 divisor comes from the definition of 1 inch = 2.54 cm. At 96 DPI, this gives 37.795 px per centimeter.

Why does the pixel value change with different DPI settings?

DPI controls how many pixels fit in one inch of screen or print space.

Higher DPI means more pixels per centimeter. Double the DPI and the pixel output doubles. The centimeter stays fixed; the pixel count scales with density.

What DPI should I use for web design?

Use 96 DPI for all screen and CSS work.

This is the W3C standard that every major browser uses to compute CSS length units. It has been the fixed reference for web pixel density since Windows set this standard in the 1980s.

What DPI should I use for print design?

Use 300 DPI for professional print output.

At normal reading distance, the human eye cannot distinguish pixels packed at 300 per inch. This is the commercial offset printing standard for business cards, brochures, flyers, and A4 documents.

How do I convert cm to px in CSS?

In CSS, 1cm always computes to 37.795px, regardless of screen resolution.

Write width: 5cm; and browsers render it as 188.976 px. However, CSS cm units are only reliable inside @media print stylesheets. Use px, rem, or em for screen layouts.

How many pixels is an A4 page?

At 300 DPI, an A4 page (21 × 29.7 cm) equals 2480 × 3508 pixels.

At 96 DPI, the same A4 document is only 794 × 1123 px, which is far too low for print output. Always use 300 DPI when preparing print-ready files.

Does screen resolution affect cm to px conversion?

Yes, but only for physical output. Browser CSS locks 1cm to 37.795 px regardless of screen density.

For image asset exports, screen resolution matters. A 2x Retina display requires assets at twice the pixel dimensions to look sharp.

How do I convert cm to px in Figma?

Figma works in pixels only. Install a unit converter plugin from the Figma Community, such as "Units to Pixels" or "Advanced Units Converter."

Enter your cm value, set the DPI (96 for screen, 300 for print), and the plugin generates the correct pixel frame size.

What is the difference between PX, PT, and CM?

These 3 units come from different design contexts. Pixels are for screens, points (pt) are for print typography, and centimeters are for physical layout dimensions.

At 96 DPI: 1 cm = 37.795 px = 28.346 pt. Use each unit only in its correct output context.