PX to REM Converter
Convert px to rem, em, pt, vw, vh and %, or back, with your root and parent font size. Table mode exports common sizes as CSS custom properties or a Sass map.
How to use PX to REM Converter
- 1Enter a value, choose the unit it is in, and set the root font size if your site does not use 16 px.
- 2Read the same length in every unit, copy the one you need, or press Swap to go between px and rem.
- 3Switch to Table to turn a list of px sizes into CSS variables or a Sass map, and copy or download it.
What makes it better
- px, rem, em, pt, vw, vh and % in one place, editable from either direction
- Separate root font size for rem and parent font size for em and %, both defaulting to 16 px
- Viewport width and height inputs for vw and vh, hidden under More options until you need them
- Choose 0 to 8 decimals; a message names the units that were rounded
- Table of sizes 10 to 72 px as :root custom properties, a Sass map or a plain list
About PX to REM Converter
Type a size in any CSS unit and see it in px, rem, em, pt, vw, vh and percent, using a root font size, parent font size and viewport you can change. Table mode lists common sizes from 10 to 72 px, or your own list, as CSS custom properties, a Sass map or plain text. Rounding is visible: the page says which values were cut off at your chosen number of decimals.
Common uses
- Convert a design file's pixel sizes to rem so type scales with the user's browser font setting.
- Work out what 18 px is in em inside a component whose parent font size is 14 px.
- Generate a spacing or font-size scale as CSS variables to paste into a stylesheet.
- Find what 5vw or 50vh comes to in pixels at a given screen size.
Example
Input
24
Result
px: 24px rem: 1.5rem em: 1.5em pt: 18pt vw: 1.6667vw vh: 2.6667vh %: 150%
Good to know
- rem uses the root font size and em uses the parent font size, so the same pixel value gives different results when those differ. Set both to match your project.
- Percent here means a percentage of the parent font size (the font-size use of %). Percentages of width or height depend on the layout and cannot be converted without it.
- Points follow the CSS definition, 1 pt = 4/3 px. Results are rounded for display only, and vw and vh values only describe the viewport size you enter.
PX to REM Converter FAQ
How do I convert px to rem?
Divide the pixel value by the root font size. With the usual 16 px root, 24 px is 1.5 rem and 10 px is 0.625 rem. Enter the number here and change the root size if your html element sets a different one.
What is the difference between rem and em?
rem is relative to the root html font size and stays the same wherever it is used. em is relative to the font size of the element's parent, so nested elements can compound. This page keeps separate fields for each base.
How do I convert rem back to px?
Choose rem in the Convert from menu and enter the value, or press Swap after a px conversion. The page multiplies by the root font size, so 1.25 rem becomes 20 px at the default 16 px.
How many pixels is 1 pt in CSS?
One point is 4/3 of a CSS pixel, so 12 pt is 16 px and 18 pt is 24 px. CSS fixes this ratio at 96 pixels per inch regardless of the real screen.
Can I export a rem scale for my stylesheet?
Yes. In Table mode list your sizes or leave the box empty for 10 to 72 px, then pick CSS variables or a Sass map. Download the file or copy the block into your own project.