How CSS Unit Conversions Work
All conversions use px as the base unit. Absolute units (cm, mm, in, pt, pc) convert via standard physical ratios at 96 DPI. Relative units (em, rem) multiply by the base font size. Viewport units (vw, vh) use your entered viewport dimensions. Percent is relative to a 1000px parent width by default — change it to match your container.
Frequently Asked Questions
em is relative to the font size of the element itself (or its nearest parent). rem (root em) is relative to the root element's font size (the element), which defaults to 16px in most browsers. rem is generally easier to work with for layout because it doesn't compound with nested elements.
By default, 1rem equals the browser's base font size, which is 16px in all major browsers unless the user or CSS overrides it. So 1rem = 16px, 1.5rem = 24px, 2rem = 32px. This converter lets you set a custom base font size for your project.
vw (viewport width) and vh (viewport height) are relative to the browser window's dimensions. 1vw = 1% of the viewport width. For example, on a 1440px wide screen, 1vw = 14.4px. These units are useful for responsive layouts that should scale with the window size.
1pt = 1/72 of an inch. At the standard screen resolution of 96 DPI: 1pt = 96/72 = 1.333px. So 12pt = 16px, which is why 12pt is the default body font size in print and 16px is the default in browsers.
Most web projects use 16px (the browser default) as the base font size. Some designers set 62.5% (10px) on the html element so that 1rem = 10px, making rem arithmetic simpler. However, this overrides the user's font size preference and can harm accessibility.
Related Calculators
More tools in the Developer Tools category.