Pixel to REM Converter: px to rem, rem to px for CSS
Convert px to rem and rem to px instantly. Free pixel to rem converter and rem to pixel converter—type in either the px or rem field and the other updates live. Uses the standard 16px root font size. Use it for responsive typography, accessible font sizes, and scalable CSS. Free, runs in your browser—no sign-up required.
What is a pixel to rem converter?
A pixel to rem converter (or px to rem calculator) converts CSS length values between pixels (px) and rem. In CSS, 1rem equals the root font size—usually 16px in browsers. So 16px = 1rem, 8px = 0.5rem, and 24px = 1.5rem at the standard 16px root. This tool lets you convert pixels to rem or convert rem to pixels: type in either the px or rem field and the other updates instantly. Use it for responsive typography, migrating from px to rem, or translating design specs (often in px) into rem for implementation.
Conversions update live as you type. The last 5 conversions are saved in your browser. All processing is local—no data is sent to a server.
How to convert pixels to rem (formula and step by step)
rem = px ÷ 16 (with the standard 16px root). So 32px = 32 ÷ 16 = 2rem, and 10px = 10 ÷ 16 = 0.625rem. To convert rem to pixels, use px = rem × 16. So 1.5rem = 1.5 × 16 = 24px. In the tool above, type in either the px or rem field and the other updates instantly—no need to choose a unit or set a base. For a rem to px converter in reverse: type in the rem field and read the pixel value.
rem = px ÷ 16 | px = rem × 16 (standard root)
Why use rem instead of px? Accessibility and responsive typography
rem is relative to the root font size, so when users change their default font size or you set html { font-size: 62.5%; } (10px equivalent), all rem-based spacing and typography scale with it. That improves accessibility and makes responsive typography easier. px is fixed and doesn’t scale with user preferences. Converting existing px values to rem (e.g. 16px → 1rem, 8px → 0.5rem) helps you move to a rem-based system and meet accessible font size guidelines. Design mockups often use px; this pixel to rem converter helps you translate those values to rem for implementation.
Use the converter to quickly get rem values for margins, padding, font sizes, and other lengths. Type in either field for instant px to rem and rem to px results.
rem vs em: when to use rem for font size
rem (root em) is always relative to the root element’s font size, so 1rem is the same everywhere on the page. em is relative to the current element’s font size (or the parent’s), so 1em can mean different pixel values in different components. For font-size, margin, and padding that should scale with the user’s settings or your root, rem is usually preferred—it avoids compounding and keeps math simple. Use this px to rem converter to get rem values (we use the standard 16px root); if you need em, you’ll need to know the context font size. Most modern CSS guides recommend rem for typography and spacing; this tool supports that workflow.
Common px to rem values (base 16px and 62.5% root)
With the standard 16px root: 8px = 0.5rem, 16px = 1rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem, 64px = 4rem. If your site uses html { font-size: 62.5%; } (10px), then 10px = 1rem, 20px = 2rem—divide our px result by 1.6 to get rem for that base, or multiply the rem we show by 1.6 to get pixels. This converter uses 16px so it matches the browser default and most tutorials.
Common use cases: who uses a pixel to rem converter?
Front-end developers use it to convert px to rem when implementing designs or refactoring from pixel-based CSS to rem for responsive typography and accessible font sizes. Designers and design-to-dev handoffs use it to translate Figma or Sketch values (often in px) into rem for development. Accessibility advocates use it to ensure font sizes and spacing scale with user preferences (rem respects the root font size). Anyone learning CSS can use it as a rem calculator or px to rem calculator to check math (e.g. 18px to rem with a 16px base = 1.125rem). All conversions run in your browser—no data is sent to a server—so you can use it offline or on sensitive projects.
Pixel to REM FAQ
? How do I convert 16px to rem?
With the standard 16px root, 16px = 1rem. Type 16 in the px field and the rem field shows 1. Type in either field and the other updates instantly.
? What is the formula for rem to px?
px = rem × 16 (standard root). So 1.5rem = 1.5 × 16 = 24px. Type 1.5 in the rem field and the px field shows 24.
? Why is my base font size 16px?
Most browsers use 16px as the default root font size, so 1rem = 16px. This converter uses that standard. If your site sets a different root (e.g. 62.5% = 10px), multiply or divide accordingly: our rem × (your root in px) / 16 gives you px in your setup.
? Should I use px or rem in CSS?
Use rem for font sizes, spacing, and lengths that should scale with user settings or your root font size—better for accessibility and responsive design. Use px for borders, shadows, or when a fixed size is required. Type in either the px or rem field and the other updates instantly.
? What is the difference between rem and em?
rem is relative to the root element’s font size (same everywhere); em is relative to the current or parent element’s font size (can compound). For font-size and spacing that should scale with the root or user settings, rem is usually preferred. This converter uses the standard 16px root.
? How do I convert px to rem when my root font size is 62.5%?
62.5% of 16px = 10px, so with that root, 1rem = 10px. This converter uses 16px. To get rem for a 62.5% site: take our rem value and multiply by 1.6 (since 16/10 = 1.6), or convert our px to your rem by dividing our px by 10. For example, 20px in a 62.5% site = 2rem; our tool shows 20px = 1.25rem at 16px.