PX to REM Converter – CSS Unit Converter
Convert a CSS length between px, rem, em, vw, vh, pt and percent. Enter the value, pick its unit, set the root and parent font sizes plus viewport dimensions, and get all equivalents at once.
Convert Between px, rem, em, vw and vh
CSS Units Formula
Where:
- \(v\) — the length you entered, in its original unit
- \(f(\text{unit})\) — how many pixels one unit of that type is worth:
- \(px\): 1 \(rem\): root font size \(em\): parent font size \(vw\): viewport width \(/ 100\) \(vh\): viewport height \(/ 100\) \(pt\): \(96/72 = 1.3333\) \(%\): parent font size \(/ 100\)
The calculator first converts the input value to pixels, then divides by the pixel factor of every target unit. This two-step approach guarantees that all seven results are consistent with each other.
CSS Units – Calculation Example
Example: convert 24px to rem, em, vw, vh and pt, with a root and parent font size of 16px and a 1920×1080 viewport (the calculator defaults).
\[ px = 24 \times 1 = 24 \]
\[ rem = \frac{24}{16} = 1.5 \quad em = \frac{24}{16} = 1.5 \]
\[ vw = \frac{24}{1920/100} = \frac{24}{19.2} = 1.25 \quad vh = \frac{24}{1080/100} \approx 2.2222 \]
\[ pt = 24 \times \frac{72}{96} = 18 \]
Result: 24px = 1.5rem = 1.5em = 1.25vw = 2.2222vh = 18pt.
How to Use the CSS Unit Converter
- Enter the length in the Value field — for example 24. Negative values work too, which is useful for negative margins.
- Select the unit of that value in the CSS Unit dropdown (px, rem, em, vw, vh, pt or %).
- Set the Root Font Size — the font size of the
<html>element. Browsers default to 16px. - Set the Parent Font Size — the computed font size of the parent element, needed for em and % conversions.
- Enter the Viewport Width and Viewport Height of the browser window in pixels; these drive the vw and vh results.
- Read all equivalents at once under Converted Values, together with the conversion basis showing how many pixels each unit equals in your setup.
What Are CSS Units and Why Do They Matter?
CSS lengths come in two families. Absolute units such as px and pt have a fixed size: the CSS specification defines the reference pixel so that 1in = 96px = 72pt. Relative units depend on context: rem refers to the root element's font size, em to the parent's font size, vw and vh to 1% of the viewport's width or height, and % (for font-size) to the parent's font size.
The choice of unit shapes how a layout behaves. Values in px stay constant regardless of user preferences, which makes them predictable for borders or fine details but rigid for typography. Values in rem scale with the root font size, so if a user enlarges the browser's base text, everything sized in rem grows proportionally — a key requirement for accessibility. Values in em compound through nested elements, which can produce surprising results in deep markup.
Viewport units make typography and spacing respond to the window size. A width set to 50vw always fills half the screen, so hero sections and fluid type often mix vw with rem using clamp(). Because vw and vh change with every resize, converting them to px is only meaningful for one specific viewport size — the one you enter in the calculator.
Interpreting the output is straightforward: each result is the same physical length expressed in a different unit. If you are migrating a design system from px to rem, the rem column tells you the token value to write; if you are printing or comparing with design tools that use points, the pt column gives the direct equivalent.
Assumptions, Limitations and Practical Tips
- The converter assumes the standard CSS reference pixel:
1in = 96px = 72pt. Physical (print) output may differ slightly depending on the device. - Percent is treated as relative to the parent font size, which is correct for
font-size. Forwidth,height,marginandpadding, percent refers to the parent's dimensions instead, so those cases need a different reference value. - em is relative to the parent's font size. When used inside a property such as
line-heightorpaddingon the element itself, em refers to that element's own font size — adjust the Parent Font Size field accordingly. - vw and vh results are valid only for the viewport dimensions you entered. Test a few sizes (e.g. 1920×1080, 1366×768, 390×844) to see how the converted values shift.
- Browsers apply a minimum font size in some configurations, which can make very small rem- or em-based text render larger than the math predicts.
- A handy rule of thumb: with the default 16px root font size, 1rem = 16px, so px ÷ 16 = rem. If you change the root to 10px, rem values map 1:1 to px ÷ 10, which is why many design systems use a 10px root.
If you also need to convert between measurement or engineering units, try our Power Unit Converter, the Data Transfer Rate Converter or the general Speed Unit Converter.
Frequently Asked Questions
How do I convert px to rem by hand without a calculator?
Divide the pixel value by the root font size. With the browser default of 16px, the formula is \( rem = px \div 16 \). So 24px = 1.5rem, 32px = 2rem, and 12px = 0.75rem. Going the other way, multiply: \( px = rem \times 16 \). If the project sets a different root size, such as 10px in the popular 62.5% trick, just replace 16 with that value.
What is the difference between em and rem, and when should I use each?
rem always refers to the root element's font size, so 1.5rem means the same thing everywhere in the document. em refers to the font size of the parent element (or the element itself for properties like padding and line-height), so it compounds in nested markup. A common guideline: use rem for font sizes and spacing so values stay predictable and respect user preferences; use em where you want something to scale with the local text, such as button padding.
How many pixels is 1pt, and how do pt and px relate to inches?
CSS defines the reference pixel so that \( 1\text{in} = 96\text{px} = 72\text{pt} \). That makes 1pt equal to \( 96/72 \approx 1.3333 \)px, and 1px equal to 0.75pt. This is why word processors and print design tools using points show different numbers than CSS: a 12pt font renders as 16px on screen. The converter uses this exact ratio for its pt results.
Why do my em values not match what the browser shows?
Two common causes. First, em compounds: if a parent has font-size 1.25em of a 16px root (20px) and the child is set to 1.5em, the child is 30px, not 24px. Second, for properties like padding, margin and line-height on an element, em refers to that element's own font size, not the parent's. In the converter, enter the element's own computed font size as the Parent Font Size in those cases.
Are vw and vh values the same on every screen?
No. 1vw is 1% of the current viewport width, so the same vw value equals different pixel amounts at different window sizes. For example, 10vw is 192px on a 1920px-wide screen but only 39px on a 390px phone. Only convert vw/vh to px for a specific viewport size — enter the exact dimensions you are targeting in the calculator, and re-run it for other breakpoints.
How do I find the root font size a website actually uses?
Open the browser DevTools, inspect the <html> element, and look at its computed font-size in the Styles or Computed panel. If no CSS rule overrides it, the browser default of 16px applies. Note that some sites use the 62.5% trick, setting the root to 10px so that 1rem = 10px. Also check whether any browser extension or minimum-font-size setting alters the effective value.
Is it better to use px or rem for accessibility?
rem is generally preferred for font sizes because it scales when users increase their browser's base text size, while px-based text stays fixed and can ignore that preference. This matters for visually impaired users and is required by accessibility guidelines such as WCAG. px remains fine for borders, shadows and hairlines where scaling is undesirable. A practical approach: rem for typography and spacing, px for pixel-critical decorative details, and clamp() with rem and vw for fluid type.