CSS Unit Converter
Enter a value once and see it in every CSS length unit — px, rem, em, pt, %, vw and vh — with the root font-size, parent font-size and viewport you choose. Copy any result with one tap.
Common conversions
Converted to every unit
rem, em and % depend on font-size; vw and vh depend on the viewport. px and pt have a fixed ratio (1pt = 1.3333px). Adjust the context above if your defaults differ.
px to rem reference (root = 16px)
| Pixels | Root em | Points |
|---|---|---|
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 32px | 2rem | 24pt |
| 48px | 3rem | 36pt |
With the default 16px root font-size, divide pixels by 16 to get rem, and multiply by 0.75 to get points.
About the CSS Unit Converter
CSS gives you several ways to express a length, and picking the right one is the difference between a layout that scales gracefully and one that breaks. This converter turns a single value into all of the common CSS units at once. px (pixels) is the absolute reference unit — in CSS one pixel is defined as 1/96 of an inch. rem is relative to the document's root font-size (the <html> element), which is 16px by default, so 1rem = 16px and 1.5rem = 24px; rem is the modern standard for sizing because changing one root value rescales the whole page, which is great for accessibility. em is relative to the current element's parent font-size, so it compounds when nested. pt (points) is the print unit, fixed at 1pt = 1/72 inch = 1.3333px, so 12pt = 16px. % in a font-size context equals the parent font-size, which makes 100% the same as 1em. vw and vh are 1% of the viewport width and height — ideal for fluid, full-screen layouts. Set your own root font-size, parent font-size and viewport size in the advanced panel; the sensible defaults (16/16/1920×1080) cover the everyday px↔rem case out of the box.
How to convert CSS units
- 1 Type a value and choose the unit it is in (for example 24 px or 1.5 rem).
- 2 Read the equivalent value in every other unit in the results grid, and tap the copy button on any card to copy it ready-to-paste (e.g. "1.5rem").
- 3 Open the advanced panel to change the root font-size, parent font-size or viewport size if your project does not use the 16px / 1920×1080 defaults.
The conversion formulas
Every conversion routes through pixels using the fixed CSS ratios: rem = px ÷ root-font-size (default 16) — so px = rem × 16. em = px ÷ parent-font-size (default 16). pt = px × 0.75, because 1px = 1/96 inch and 1pt = 1/72 inch, giving 1pt = 96/72 px = 1.3333px and 1px = 0.75pt. % = px ÷ parent-font-size × 100 (font-size percentage, where 100% = the parent's font-size, identical to 1em). vw = px ÷ viewport-width × 100, and vh = px ÷ viewport-height × 100. With the defaults that means 16px = 1rem = 1em = 100% = 12pt = 0.8333vw = 1.4815vh. If a base such as the root font-size is set to 0 the matching unit becomes undefined and is shown as "—" rather than infinity.
Frequently asked questions
How many px is 1rem?
By default 1rem = 16px, because rem is relative to the root (<html>) font-size and browsers set that to 16px out of the box. So 1.5rem = 24px and 2rem = 32px. If you change the root font-size — for example to 10px to make the math simpler — then 1rem equals that value (16px would become 1.6rem). Set your own root font-size in the advanced panel and the converter recalculates instantly.
What is the px to rem formula?
rem = px ÷ root-font-size, and the reverse is px = rem × root-font-size. With the default 16px root that means you divide a pixel value by 16 to get rem: 24px ÷ 16 = 1.5rem, 10px ÷ 16 = 0.625rem. rem is preferred over px for font sizes and spacing because it respects the user's browser font-size setting, which is better for accessibility.
What is the default root font-size?
The default root font-size in every major browser is 16px, applied to the <html> element. This is the basis for rem, so 1rem = 16px unless you (or a stylesheet) override it. This converter uses 16px as the default for both root and parent font-size; you can change either in the advanced panel to match your own project.
What is the difference between px and pt?
px (pixel) is the standard unit for screens and is defined in CSS as 1/96 of an inch. pt (point) is the traditional print/typography unit, equal to 1/72 of an inch. That makes the ratio fixed: 1pt = 96/72 px ≈ 1.3333px, and 1px = 0.75pt. So 12pt = 16px, which is why a 12pt print document and a 16px screen heading look the same size. Use px (or rem) for the web and reserve pt for print stylesheets.
Related tools
Keep building on UnitConv. Convert colors between HEX, RGB and HSL with the color converter, generate CSS gradients, check WCAG contrast ratios, work out aspect ratios, and explore length units beyond the web in the main unit converter.