CSS Unit Converter

CSS length units split into absolute and relative families, and the conversion between them is fixed by specification rather than measured from the physical display. CSS anchors the reference pixel at 1/96 of an inch, so 96 px equals 1 in, 1 px equals 0.75 pt (a point being 1/72 inch), and 1 px equals about 0.02646 cm. These ratios hold in the stylesheet regardless of the actual pixel density of the screen: a 3x phone display still reports 96 CSS pixels per inch to the layout engine, with the device pixel ratio handled below the CSS layer. That is why changing the DPI field here alters the physical interpretation of a measurement, such as for print output, rather than what a browser would render. Relative units behave differently. One rem equals the computed font size of the root html element, which is 16 px in every major browser unless the user changes it, so 1 rem is 16 px, 1.5 rem is 24 px, and 0.875 rem is 14 px. Because rem tracks the reader chosen default text size, it is the preferred unit for type and spacing under WCAG resize requirements, while px is best reserved for hairline borders and other details that should not scale. The main caveat is that em is relative to the parent font size and therefore compounds through nested elements, so two nested rules of 1.5em each yield 2.25 times the base size.

The point predates computing by two centuries. Pierre Simon Fournier proposed a typographic point in 1737, Francois Ambroise Didot revised it around 1783, and American type foundries adopted a point of 0.013837 inch in 1886. Adobe simplified this when PostScript shipped in 1984 by defining the point as exactly 1/72 inch, the value CSS still uses. CSS 1, published by the W3C in December 1996 with Hakon Wium Lie and Bert Bos as principal authors, defined px, pt, pc, in, cm, mm, em, and ex, but treated the pixel as a device pixel. Because screen densities varied widely, CSS 2.1 introduced the reference pixel, defined by a visual angle of about 0.0213 degrees, and pinned the nominal ratio at 96 px per inch to match the resolution assumed by Windows displays of that era. The rem unit was added in the CSS Values and Units Module Level 3 and reached usable browser support in Safari 5, Firefox 3.6, Chrome 6, and Internet Explorer 9 between 2010 and 2011, giving authors a relative unit free of em compounding. Viewport units vw, vh, vmin, and vmax arrived through the same module, and the dynamic variants dvh, svh, and lvh were added later to handle mobile browser toolbars that change the visible viewport height during scrolling.