CSS Unit Converter
Convert px, rem, em, vw, vh and more
Set the root size and viewport, then enter any unit value to convert everything immediately; layout scenarios are available in Advanced mode.
The full guide also includes pitfalls, worked examples, snippets, FAQs, and related tools for checking results or troubleshooting.
About this tool
Convert px, rem, em, vw, vh, pt, cm, mm, in and percent using explicit reference values. Both em and rem use the entered root font size; percent also refers to that size. Viewport units use entered dimensions, and physical units follow approximate CSS-pixel ratios rather than screen measurements.
Scenario Recipes
Convert 24px using an explicit 16px base
Goal: Document the assumptions behind a typography conversion.
- Set root font size to 16.
- Enter 24 in the px field.
- Read 1.5rem, 1.5em and 150% as outputs using the same configured base.
Result: The em and percent values are calculator assumptions, not measurements of an element.
Failure Clinic (Common Pitfalls)
A parent width is not the percent base here
Cause: The percent field always uses root font size; em also shares that base.
Fix: For width, transforms or element-relative em, inspect the actual CSS property and reference dimensions.
Production Snippets
Example
text
24px / 16px = 1.5rem
24px / 16px × 100 = 150% (of configured root size)Frequently Asked Questions
Why do em and rem have the same result here?
The calculator uses the configured root font size for both. Real CSS em depends on the relevant element’s font context, so this equality is only a calculator assumption. For example, 24px at a 16px base is 1.5rem and 1.5em here.
What does the percent field refer to?
It is a percentage of the configured root font size: 24px at a 16px base gives 150%. It is not a general conversion for width: 50%, percentage transforms or parent-relative layout. Those require the property’s actual reference dimensions.
Are vw, vh and physical sizes measured from my screen?
No. vw and vh use the entered viewport width and height. Inches use 96 CSS pixels; pt, cm and mm use approximate CSS ratios, with output rounded to four decimal places. These values are not physical monitor measurements and do not model mobile dynamic viewport units.
Keep browsing