CSS Unit Converter
Convert between px, rem, em, pt, vw, and vh. Set the root font size, element font size, and viewport dimensions to convert accurately for your actual context.
A free CSS unit converter for px, rem, em, pt, vw, and vh. Unlike a simple fixed-ratio converter, this tool asks for the context each relative unit actually depends on — root font size for rem, element font size for em, and viewport width/height for vw/vh — since these units are not universally interchangeable with pixels the way many simplified converters assume. Enter a value, pick its unit, adjust the context if it differs from the defaults, and see the equivalent value in every other unit. Everything runs in your browser, and nothing is stored.
How to use this tool
- 01Enter a value and its unitType the number and select which unit it is currently in.
- 02Set the context, if neededAdjust the root font size, element font size, or viewport dimensions to match your actual page — the defaults (16px root/element, 1920×1080 viewport) are common but not universal.
- 03Read the converted valuesEvery other unit updates automatically based on your value and context.
When is this useful?
- Converting a design spec to CSSTurn a pixel measurement from a design file into rem for a codebase that uses rem-based sizing.
- Checking a relative unit against your actual root sizeIf your project sets a non-default root font size (a common practice for rem-based scaling systems), convert accurately using your project's actual value instead of assuming 16px.
- Working out a viewport-relative sizeConvert a target pixel width into vw for a specific viewport size you are designing for.
Examples
- 16px at the default 16px root16px = 1rem, since the root font size is 16px by default in most browsers (this is a common default, not a rule — many sites intentionally change it).
- The same rem value at a different root sizeIf a project sets its root font size to 10px (a common technique for easier rem math), 1rem equals 10px there, not 16px — the same rem value converts to a different px value depending on this context.
- px and pt (a fixed relationship)96px always equals 72pt, and vice versa — pt and px are both fixed, absolute units that do not depend on any page context.
Why rem, em, vw, and vh are not fixed ratios to px
Unlike px and pt, which have a fixed, universal relationship (96px = 72pt, always), rem, em, vw, and vh are relative units. 1rem always equals the root (<html>) element's font size — which is 16px by default in most browsers, but is frequently changed by a site's own CSS. 1em equals the font size of the specific element it is used on (which can itself be inherited or overridden), not a page-wide constant. 1vw and 1vh equal 1% of the current viewport's width and height, which differs on every screen size. Converting any of these to px without knowing the actual context produces a number that may not match your real page at all — this tool asks for that context explicitly rather than assuming a fixed value.
The default context values used here
By default, this tool assumes a 16px root font size, a 16px element font size, and a 1920×1080 viewport — common values, but not universal ones. Adjust any of them to match your actual project before trusting the rem, em, vw, or vh results.
px and pt: the one fixed pair
Pixels and points are both absolute units with a fixed relationship defined by the CSS specification: 1 inch = 96px = 72pt, so 1pt = 4/3 px. This conversion never depends on context, unlike the relative units above.
Frequently asked questions
What is the difference between rem and em?
Rem is always relative to the root (<html>) element's font size, the same value everywhere on the page. Em is relative to the current element's own font size, which can be different in different parts of a page, especially with nested elements.
Is 1rem always 16px?
Only if the root font size is 16px, which is a common browser default but not guaranteed — many projects deliberately change it (for example, to 10px for easier rem math). Set the actual root font size in this tool for an accurate conversion.
Why do vw and vh need a viewport size?
1vw is defined as 1% of the current viewport width, and 1vh as 1% of the current viewport height — both are inherently tied to the screen size being viewed, so there is no single universal px equivalent.
Is the px-to-pt conversion always the same?
Yes. Unlike rem, em, vw, and vh, px and pt have a fixed relationship (96px = 72pt) defined by the CSS specification, independent of any page context.
Is my data saved?
No. Everything is calculated in your browser; nothing is sent to a server.
Related tools
- Color Contrast CheckerCheck the WCAG contrast ratio between a text color and a background color, with clear AA/AAA pass or fail results for normal and large text.OpenOpen the tool
- Color PickerPick a color and convert between HEX, RGB, and HSL, with a suggested palette and a quick black/white contrast check. Click any value to copy it.OpenOpen the tool
- Lorem Ipsum GeneratorGenerate placeholder Lorem Ipsum text by paragraphs, sentences, or words, for mockups, design, and development. Runs in your browser.OpenOpen the tool