Every front-end developer has lost an afternoon to a screen that was "27 inches" in the listing, 68.6 cm in the spec sheet, and somehow a different physical size on the desk. Physical units and CSS units live in different worlds, and confusing them is a rite of passage.
The physical side is simple. One inch is exactly 2.54 cm — defined, not measured. A 27-inch monitor is 68.58 cm diagonally, a 6.1-inch phone is 15.49 cm. When you are comparing hardware, checking whether a monitor fits a desk gap, or reading a US product page from a metric country, an inches to cm converter settles it in one step: inches × 2.54, done.
The CSS side is where it gets weird. A CSS inch (in) is not a physical inch. CSS defines 1in = 96px exactly, anchored to a reference pixel — so on most screens a "2in" element is nowhere near two physical inches. The same goes for CSS cm and mm: they are just scaled fractions of that 96px inch (1cm = 37.8px), useful for print stylesheets, misleading for anything on a desk.
Practical rules that save time.
- Hardware and furniture: true units — convert with ×2.54 and trust the tape measure.
- Screen layouts: pixels, rem and percentages — never physical units.
- Print stylesheets: CSS cm/mm are fine, because the printer pipeline actually honours them.
- Buying from US stores: assume listings are inches; convert before you commit, especially for monitor arms, TV mounts and cases, where "close enough" means a return shipment.
Two worlds, two rulebooks. Keep the physical conversions exact and the CSS ones relative, and neither will bite you again.
Top comments (0)