Built and fact-checked by the DocNectar team — see our editorial standards
Key Features
Instant Calculation
Get accurate results in real time with our optimized algorithm.
Mobile Friendly
Fully responsive design. Works on all devices & screen sizes.
Privacy Focused
Your data stays on your device. We don't store any inputs.
100% Free
No hidden costs. This tool is completely free forever.
CSS supports several length units, and converting between them isn't always straightforward — em and rem are relative to a font size rather than a fixed length, which trips up a plain px-to-pt style calculation.
This converter handles both the fixed-ratio units (px, pt, pc, in, cm, mm) and the font-relative units (em, rem), using a base font size you can set to match your actual page.
How it works
Enter a value, choose the units to convert from and to, and set the base font size in pixels (16px matches most browser defaults). Fixed units convert using the standard CSS specification ratios; em and rem are calculated relative to your base font size.
- Enter value.
- Enter from.
- Enter to.
- Enter base font size in pixels (for em/rem).
- Click Calculate to see your results.
Examples
Converting 16px to rem
At a 16px base font size, 16px converts to exactly 1rem — the standard browser default relationship.
Who should use it
- Converting a design spec given in px into rem for implementation.
- Converting print-oriented units (pt, in, cm) into web-friendly px or rem.
Industry applications
- Web development and front-end engineering
- UI/UX design handoff
Advantages
- Covers both fixed-ratio and font-relative CSS units in one tool.
- Configurable base font size for accurate em/rem conversion.
Limitations
- Treats em and rem identically (both relative to the entered base font size) — true em compounding through nested parent elements isn't modeled.
Common mistakes to avoid
- Assuming em and rem always equal the same pixel value, when em depends on context (parent font size) while rem doesn't.
- Using the default 16px base font size when a page has actually overridden its root font size.
Best practices
- Prefer rem over em for most layout sizing to avoid unexpected compounding when elements are nested.
- Check your page's actual root font size (via browser dev tools) before converting em/rem values if it's not the 16px default.
Tips
- When converting for a real project, check whether the page sets a non-default root font size (some frameworks set it to something other than 16px) before trusting em/rem results.