Advertisement
Guide
About the CSS Unit Converter
CSS has two kinds of length units. Absolute units such as px, pt and cm are fixed, while relative units such as rem, em, vw and vh depend on something else — the root font size, the parent element or the size of the browser window. This converter turns any value into every other unit using the context you set, so you can see exactly what a size becomes.
Beyond single values, it can rewrite every px value in a stylesheet as rem and build a fluid clamp() size that scales smoothly between two screen widths.
Why use rem instead of px?
rem sizes are multiples of the root font size, which the visitor can change in their browser settings. Text and spacing set in rem grow with that preference, so people who need larger text get it; sizes set in px ignore it. With the default 16px root, 1rem is 16px, 1.5rem is 24px and 0.875rem is 14px.
rem vs em
rem always refers to the root (html) font size, so it gives the same result anywhere on the page. em refers to the current element’s parent font size, so nested em values compound — a 1.2em list inside a 1.2em list is 1.44 times the base. Use rem for most sizes and em when something should scale with its own text, like the padding of a button.
How to use it
- 1Set the root font size, parent font size and viewport if they differ from the defaults.
- 2Type a value, pick its unit, and read every other unit at once.
- 3Click a result to copy it, or switch tabs to convert a stylesheet or build a clamp().
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font size. With the browser default of 16px, 24px ÷ 16 = 1.5rem.
How many px is 1rem?
1rem equals the root font size, which is 16px in every major browser unless the page or the user changes it.
What is 1vw in px?
1vw is 1% of the viewport width. On a 1440px-wide window, 1vw is 14.4px.
How do I convert pt to px?
CSS defines 1pt as 1/72 inch and 1px as 1/96 inch, so 1pt = 1.333px and 12pt = 16px.
Should borders be in rem?
Usually not. A 1px border converted to 0.0625rem can round to zero or blur on some screens, so the stylesheet converter keeps very small values in px by default.
What does clamp() do for font sizes?
clamp(min, preferred, max) lets a size follow a viewport-based value while never going below the minimum or above the maximum, giving fluid typography without media queries.