CSS Unit Converter
Convert between px, rem, em, vw, vh, and pt in real time. Set your project's base font size and viewport dimensions for accurate results.
| Unit | Value | CSS |
|---|
Frequently Asked Questions
What is the difference between px, rem, and em in CSS?
px is an absolute unit — 16px stays 16px regardless of user settings. rem is relative to the root element's font size (typically 16px in browsers), so 1rem = 16px by default. em is relative to the font size of the element itself or its parent. rem is more predictable than em for layout because it always refers back to a single root value rather than an inherited one.
Why should I use rem instead of px?
rem respects the user's browser font size preference. If someone has set their browser default to 20px for accessibility, elements sized in rem scale up automatically, while px-sized elements stay fixed and can become hard to read. rem also simplifies responsive scaling: adjusting the root font size with a single media query rescales the whole layout proportionally.
How do I calculate rem from px?
Divide the pixel value by the root font size. With the browser default of 16px: 24 ÷ 16 = 1.5rem. If your project sets :root { font-size: 10px; } as a convenience scale, then 24px becomes 2.4rem. Enter your project's actual base font size in the field above and this tool calculates the correct rem value automatically.