CSS Unit Converter

Convert between px, rem, em, pt, vw, vh, and % instantly, using your own base font size and viewport dimensions — no more guessing what 1.5rem actually is in pixels.

What is CSS Unit Converter?

CSS supports several different units for sizing — absolute ones like px and pt, and relative ones like rem, em, vw, vh, and %. Relative units are essential for responsive, accessible design (rem in particular respects a user's browser font-size preference), but converting between them mentally is genuinely difficult, since the result depends on context: the root font size, the current element's font size, or the viewport dimensions.

This converter does that math for you: set your base font size, viewport dimensions, and the value you're converting from, and see the equivalent value in every other unit instantly — useful for translating a design mockup's pixel measurements into responsive rem/vw values, or double-checking what an existing CSS rule actually renders as on screen.

Formula

1rem = 1em = base font size (default 16px)

1pt = 96/72 px ≈ 1.333px

1vw = viewport width / 100

1vh = viewport height / 100

1% = reference value / 100

How to Calculate

Enter the value you want to convert and select its starting unit.
Set your base font size (defaults to the browser standard of 16px).
For vw/vh conversions, enter your target viewport width and height.
Read the equivalent value in every other unit instantly.

Example

At a 16px base font size, 1.5rem converts to 24px. At a 1440px viewport width, 5vw converts to 72px.

Key Benefits

Converts between all 7 common CSS units in one place
Uses your actual base font size and viewport, not a fixed assumption
Instant results as you type — no need to open browser dev tools
Free, no sign-up, runs entirely in your browser

Common Mistakes to Avoid

Assuming 1rem always equals 16px, without checking if the root font size was changed
Using vh for mobile full-height layouts without accounting for browser address bar behavior
Nesting em-based font sizes and being surprised when they compound unexpectedly
Mixing px and rem inconsistently within the same component, breaking accessibility scaling

Pro Tips

Prefer rem over em for font sizes to avoid unexpected compounding in nested components
Use dvh/svh instead of vh for mobile full-screen layouts if your target browsers support it
Keep a consistent base font size across your design system so rem conversions stay predictable
When translating a pixel-perfect design, convert spacing to rem but keep border-widths and other fine details in px

Key Terms Explained

Root font size: The font-size set on the html element, which all rem units are relative to
Viewport: The visible area of a web page in the browser window
Absolute unit: A unit like px or pt with a fixed real-world size, not relative to any context
Relative unit: A unit like rem, em, vw, or % whose size depends on another value

Common Use Cases

Converting a designer's pixel-based Figma/Sketch spec into rem values for accessible CSS
Checking what a vw-based responsive font size actually renders as at a specific screen width
Translating legacy pt-based print or email CSS into web-standard px or rem
Auditing whether a design system's spacing scale lines up cleanly across units
Quickly sanity-checking a CSS value during code review without opening dev tools

Frequently Asked Questions

What's the difference between rem and em?

rem is always relative to the root (html) element's font size, so it stays consistent no matter how deeply nested an element is. em is relative to the current element's own font size, which means it can compound when nested — this tool treats both the same way for simplicity, using your base font size.

Why does 1rem usually equal 16px?

16px is the default browser font size for the root html element in virtually every browser. Since rem is relative to that root size, 1rem equals 16px unless the page (or the user's browser settings) explicitly changes the root font size.

What are vw and vh used for?

vw (viewport width) and vh (viewport height) are percentages of the browser window's current width and height — 1vw equals 1% of the viewport width. They're commonly used for full-screen layouts and responsive typography that scales with the screen.

Is a pixel always exactly 1/96th of an inch?

By CSS specification, yes — a CSS pixel is defined as 1/96th of an inch, which is also why 1pt (1/72 of an inch) converts to exactly 96/72 = 1.333 CSS pixels.

Related Tools

Aspect Ratio Calculator

Bandwidth Calculator

Download Time Calculator

Cloud Hosting Cost Calculator

CDN Cost Calculator

API Monetization Calculator