Use the free CSS Unit Converter below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
Why CSS Units Cause So Many Layout Surprises
CSS offers many ways to say a size: pixels, rems, ems, percentages, viewport units, points, and physical units like centimetres. Each one means something different, and each one changes when something else changes. A rem follows the root font size, an em follows the font size of its parent, a percentage follows its context, and a viewport unit follows the browser window. Mixing them without converting is how text ends up too small on one screen and far too large on another.
This converter turns one value into every common unit at once, using the root size, context size, and viewport size you set. That matters because there is no single fixed answer to a question like what is 2rem in pixels: with a 16 pixel root it is 32 pixels, but with a 20 pixel root it is 40. By setting your real project values first, you get answers that match your site instead of answers for a default that may not apply to you.
How to Use It
Type a value, pick the unit it is written in, and set the root font size, context font size, and viewport size to match your project. Press Convert and the tool shows the equivalent in every unit, with the pixel value highlighted at the top.
- Type the number you want to convert, for example 1.5.
- Choose the unit it is currently in, such as rem, em, vw, or pt.
- Set the root font size. The default is 16 pixels, which is the usual browser default.
- Set the context font size if you are converting em or percentage values.
- Set the viewport width and height if you are converting vw or vh values.
- Press Convert and read the full table of equivalents.
A Worked Example
Imagine a designer hands you a spacing value of 1.5rem and your root font size is 16 pixels. The converter shows 24 pixels, which is easy to check against a mockup measured in pixels. Change the root to 20 pixels and the same 1.5rem becomes 30 pixels, which shows why a site that lets users change their base font size cannot be measured with fixed pixels alone. The same idea works in reverse: a 50vw gap on a 1280 pixel wide window is 640 pixels, but on a 375 pixel phone it is only about 188 pixels.
Tips That Save Time
- Use rem for most spacing and type sizes, because it scales with the root size and respects user settings.
- Use em when a size should scale with its own element, for example padding inside a button that grows with its text.
- Use vw and vh sparingly for full-width heroes and large type, and always check the result on a small phone screen.
- Remember that pt is a print unit: 72 points equal 96 pixels on screens, so points look larger than many people expect.
- Convert before you hard-code a value, not after a layout breaks, and keep the converter open while you review a design file.
Common Mistakes to Avoid
The most common mistake is converting with the wrong root size, usually by assuming 16 pixels when a project actually sets 10 or 20. Another is treating em and rem as the same thing: an em inside a nested element compounds with every parent, while a rem always refers back to the root. A third is using viewport units for body text without a cap, which makes text unreadably small on phones and enormous on wide monitors. Check all three settings before you trust a number.
Questions People Ask
What is the difference between rem and em? A rem is always relative to the root element font size, while an em is relative to the font size of the element it sits in, so em values can compound through nesting.
Why do I need to set the viewport size? Viewport units are percentages of the browser window, so 10vw is a different number of pixels on a phone and on a desktop monitor. The converter needs your window size to give a real pixel answer.
Sizes stop being guesswork once you convert them against your real settings. Enter your value, set your sizes, and use the table to pick the unit that behaves the way your layout needs.