CSS Unit Converter
Convert px, rem, em, pt, %, vw and vh in one shot, with a live preview so you can see the exact size, not just the number.
Reference Sizes
Live Preview
Quick reference (px → rem, current root size)
About this tool
What this CSS unit converter does
CSS gives you seven different ways to size something — px, rem, em, pt, %, vw, vh — and every one of them means something different depending on context. This tool converts a value in any one of those units into all the others at once, using the root font size, parent font size, and viewport dimensions you specify, so the numbers actually match your real stylesheet instead of assuming a generic 16px default.
How to use it
- Enter a value and pick which unit it's currently in — px, rem, em, pt, %, vw, or vh.
- If your project uses a non-default root font size (some design systems set it to 62.5% for easy rem math, i.e. 10px), update "Root font size" so the rem conversion matches reality.
- Set "Parent font size" for accurate em and % conversions — both units are relative to the parent element, not the root, which is exactly why em and % values can be so confusing to convert by hand.
- Set your target viewport width/height to convert vw/vh accurately for the screen size you're actually designing for.
- Check the live text preview to see what the resulting size actually looks like, and use the px-to-rem quick reference table for common values without re-entering anything.
The difference between em, rem, and % (the part people usually get wrong)
- rem is always relative to the root (
<html>) font size — consistent no matter how deeply nested the element is. - em is relative to the parent element's font size, which means the same em value can render at different pixel sizes depending on where it sits in the DOM. This is the single biggest source of "why is my em value rendering wrong" bugs.
- % for font-size behaves the same way em does — relative to the parent's computed font size.
- vw/vh are relative to the viewport, not any element at all, which makes them useful for fluid typography but risky for anything that needs to stay readable at very small or very large screen widths.
Real-world use cases
- Converting a Figma/Sketch design spec: Designers usually hand off px values; developers need rem for accessible, zoom-friendly CSS.
- Debugging inconsistent em sizing: Trace exactly what pixel value an em is actually rendering at once you know its parent's font size.
- Building fluid typography: Check what a vw-based font size actually renders as in pixels at a specific viewport width before committing to it (or pair with a CSS clamp() calculator for the min/max bounds).
- Print stylesheets: Convert between px/pt when preparing a print.css, since pt is the traditional print unit and 1pt is exactly 4/3 of a px at 96 DPI.
Frequently asked questions
Why does 1rem not always equal 16px?
1rem equals whatever the root (html) element's font size is. Browsers default that to 16px, but plenty of CSS resets or design systems change it — a common pattern sets it to 62.5% (10px) specifically so rem values divide cleanly by 10.
Should I use px, rem, or em for font-size?
Most accessibility guidance recommends rem for font sizes, since it scales properly when a user changes their browser's default font size, while px stays fixed regardless of user zoom preferences. em is best reserved for sizing that should scale relative to its immediate parent, like padding inside a button that should grow with the button's own font size.
How exact is the px-to-pt conversion?
It's an exact ratio: at the standard 96 DPI browsers assume, 1pt = 4/3 px (0.75pt per px), so 12pt is always exactly 16px regardless of any other setting.
What's a sensible viewport width to use for vw calculations?
Use whatever your actual target breakpoint is — 1920 for a common desktop design, 1440 for laptop, or 375-430 for mobile — since vw is only meaningful relative to a specific viewport size.