PX ↔ REM Converter
Convert between pixels and rems for any base font size (default 16px). Paste a list of values to convert all at once — useful for responsive CSS and design token work.
How to use the px ↔ rem converter
Set the base font-size (default 16px). Edit either the px or rem field — the other updates instantly.
Formula & explanation
rem = px ÷ base. px = rem × base. Most browsers default to 16px root.
Examples
Base 16: 32px = 2rem. 24px = 1.5rem.
Frequently asked questions
- Why use rem instead of px in CSS?
- rem units scale with the user's browser font-size preference, improving accessibility. If a user sets their browser to 20px, 1rem = 20px everywhere, whereas px values stay fixed.
- What is the base font size in most browsers?
- The default root font-size is 16px in all major browsers unless overridden by the user or by html { font-size: ... } in CSS.
- How do I convert 14px to rem?
- Divide by your base: 14 ÷ 16 = 0.875rem. Enter 14 in the px field (with base 16) and the tool shows the result instantly.
- Does rem work for spacing and not just font sizes?
- Yes — rem is valid for any CSS length property including padding, margin, width, and gap. It keeps your entire layout proportional to the user's font preference.
Related design & css tools
- Aspect Ratio CalculatorCalculate width or height to preserve any aspect ratio — 16:9 widescreen, 4:3, 1:1, or custom. Great for responsive images, video embeds, and UI layouts.
- WCAG Contrast CheckerCheck foreground/background color contrast ratios against WCAG 2.1 AA (4.5:1) and AAA (7:1) standards. Enter HEX or RGB values — see pass/fail for normal and large text.
- CSS Gradient GeneratorBuild linear and radial CSS gradients visually with a live preview and copy-ready CSS output. Control colors, stops, angle, and shape — no code required.
- Image Color PaletteExtract a dominant color palette from any uploaded image. Shows the top colors with HEX values — useful for brand identity, design matching, and color inspiration.
- Box Shadow GeneratorCompose CSS box-shadow visually — adjust X/Y offset, blur, spread, and color with a live preview. Copy the final CSS rule with one click. Supports multiple shadow layers.
- Border Radius GeneratorBuild CSS border-radius values visually — symmetric, asymmetric, or fully custom per-corner shapes. Live preview with copy-ready CSS output for any border-radius combination.