What is CSS Unit Converter?
A CSS unit converter translates a length between px, rem, em, vw, and vh using a root font size and viewport width/height you control. Enter a value and source unit, set the context, and read every equivalent at once.
Important limitation: in this tool, em uses the same reference as rem—the configured root font size. Real CSS em is relative to the element’s font-size (often inherited from a parent), which may differ from the root. Treat em results here as root-referenced approximations unless your context truly matches.
CSS length units solve different problems: px for absolute device pixels in many design tools, rem for root-relative type, em for local font-relative sizing, and vw/vh for viewport-relative layout. Converting between them only makes sense when you state the root and viewport assumptions.
Why Use This Tool?
Design specs in px often need rem for accessible typography scaling. Viewport units need explicit viewport assumptions when you convert at design time.
Seeing all equivalents together catches mistakes like treating 1rem as always 16px when your html font-size differs.
Hand-offs frequently say “24px” while the codebase expects rem. This converter makes the arithmetic explicit so nobody silently assumes a 16px root.
- px, rem, em, vw, and vh
- Configurable root font size
- Configurable viewport width and height
- All equivalents updated together
How Does This Tool Work?
The converter first turns your input into pixels: px unchanged; rem and em multiply by root font size; vw is (value/100)×viewport width; vh is (value/100)×viewport height. Then it converts that pixel length into each target unit by inverting the same relations.
Invalid or non-positive root or viewport values clear the table until inputs are finite and greater than zero.
Update any context field and the entire equivalents table recomputes. Use the from-unit select when your source measurement is already in rem or vw.
Understanding Your Results
If root font size is 16px, 1.5rem equals 24px. If the viewport is 1280px wide, 50vw equals 640px under that assumption.
Changing viewport numbers does not read your actual browser window—it uses the fields you set, so document the viewport you assumed when sharing conversions.
Why Tracking This Matters
Unit mistakes cause type that is too small on user font scaling or spacing that breaks on mobile viewports. Converting with explicit context keeps tokens honest.
Benefits of Using CSS Unit Converter
- One input → five unit readouts
- Explicit root and viewport context
- Helpful for rem-based design systems
- Clarifies vw/vh against a chosen viewport
- Runs privately in the browser
- Free
How Is the Result Calculated?
px = value for px inputs; px = value × root for rem/em; px = value/100 × viewport dimension for vw/vh. Inverse formulas divide by the same factors. Display rounding uses up to four decimal places for non-px units and two for px formatting helpers.
px ↔ rem/em via rootFontSize; px ↔ vw/vh via viewportWidth/Height
- rootFontSize
- Pixels assumed for 1rem (and for em in this tool).
- viewportWidth / viewportHeight
- Pixels used for 100vw and 100vh.
Tips for Better Results
- Set root font size to your actual html computed font-size.
- For true parent-relative em, convert manually using the parent’s font-size—not only the root.
- Document viewport assumptions when handing rem↔vw mixes to engineers.
- Prefer rem for typography scales; reserve vw/vh for layout that should track the viewport.
- Pair with the Typography Scale Generator when building type steps.
Standards and References
Conclusion
Enter the length you know, set a realistic root font size and viewport, and read px, rem, em, vw, and vh together. Remember the em caveat, then lock the units your design system actually ships.