How to convert px to rem
- 1Set the Root font size. Leave it at 16 for the browser default, or pick 10, 14, 18 or 20, or type your own if your CSS sets font-size on the html element.
- 2Type a value into Pixels to see it in rem, or into REM to see it in pixels. Both fields accept a trailing unit, so 24px or 1.5rem work too.
- 3Use the px to rem table for common sizes from 1px to 96px, recalculated for your root size. Each row has a copy button.
- 4To convert a whole file of CSS px to rem (or back), paste it into the stylesheet converter, choose px → rem or rem → px, and copy the converted output.
Why rem, and how the math works
A rem is a multiple of the root element's font size. The formula is simply rem = px ÷ root size, and px = rem × root size. Every major browser ships with a 16px default, so 24px is 1.5rem and 14px is 0.875rem. If your stylesheet sets html { font-size: 10px }, then 1rem is 10px and 24px becomes 2.4rem, A rem calculator is only right if it uses your actual root size, which is why the root size is configurable here.
The reason to use rem at all is accessibility. When someone raises the default font size in their browser settings, anything sized in rem grows with it, while anything in px stays fixed. Sizing text, spacing and layout widths in rem keeps a page in proportion for people who need larger text. Media queries written in rem or em respond to that setting too.
em works the same way, except it's relative to the parent element's font size rather than the root, so values compound when elements are nested. This tool converts against the root; for em, enter the parent's font size as the root size.
The stylesheet converter finds numbers followed by px and replaces them using the current root size. It leaves 0px alone, skips values glued to identifiers such as a .grid-10px class name, and rounds to at most four decimal places. Hairline borders are a common exception, since 1px becomes 0.0625rem, which can render inconsistently at some zoom levels. Tick 'Keep 1px values as px' to leave them untouched.
When developers reach for it
Translating designs
Convert pixels to rem for values taken from a Figma or Sketch file, then use them in a stylesheet, Tailwind config or design tokens.
Migrating old CSS
Paste a legacy stylesheet that's full of px and convert it to rem in one pass to make the layout scale with user font settings.
Working with a 62.5% root
Projects that set html { font-size: 62.5% } make 1rem equal 10px. Set the root to 10 to get matching numbers.
Checking framework spacing
See what a framework's rem-based spacing scale means in pixels, for example that 0.25rem is 4px at the default root.
Frequently asked questions
How many pixels is 1rem?
+
16px by default in Chrome, Firefox, Safari and Edge. It changes if your CSS sets a different font-size on the html element, or if the user changes their browser's default font size.
What's the formula to convert px to rem?
+
Divide the pixel value by the root font size: 24 ÷ 16 = 1.5rem. To go back, multiply: 1.5 × 16 = 24px.
Should I use rem or px?
+
Use rem for font sizes, spacing and breakpoints so the layout respects the user's font-size preference. px is still fine for things that shouldn't scale, such as hairline borders or box-shadow offsets.
What's the difference between rem and em?
+
rem is relative to the root html element's font size. em is relative to the current element's parent font size, so em values multiply when elements are nested.
Does the stylesheet converter change anything except px?
+
No. In px → rem mode it only rewrites numbers followed by px; in rem → px mode it only rewrites numbers followed by rem. Colors, percentages, em and everything else are left as they are.
Related tools
HEX to RGB Color Converter
Convert colors between HEX, RGB and HSL in both directions, including 8-digit hex and alpha. Color picker, RGB sliders, CSS Color 4 syntax and a WCAG contrast check against white and black.
Lorem Ipsum Generator
Generate lorem ipsum placeholder text by paragraphs, sentences or exact word count. Start with the classic "Lorem ipsum dolor sit amet" or not, and copy it as plain text or HTML paragraphs.
Image Resizer
Resize images to exact pixel dimensions or a percentage of the original, with optional aspect-ratio lock. Export as WebP, JPG, or PNG at any quality.
SVG to PNG
Rasterize SVGs to PNG, JPEG, or WebP at any resolution. Paste source or drop a file, set the export dimensions, and download — ideal for @2x / @3x asset pipelines.