PX to REM Converter

Convert pixel values to REM/EM units for responsive CSS.

Overview

Converts pixel values (px) to scalable rem and em CSS units based on configurable root font-size baselines (default 16px).

Formula & Calculation Method

rem = px / Root_Base_Font_Size (default 16px) | px = rem × Root_Base_Font_Size

rem units scale relative to the root <html> font-size, preserving user accessibility preferences set in browser settings.

Worked Example: Converting 24px Font Size to REM (Base 16px)

Inputs: Pixel Value = 24px | Root Base = 16px

  • Divide pixels by root font size: 24 / 16 = 1.5 rem
  • CSS declaration: font-size: 1.5rem;
  • If root base is 10px (62.5% trick): 24 / 10 = 2.4 rem

Summary: 24px = 1.5rem (at 16px base) | Scalable | Accessible

Common Use Cases

  • Responsive Web Typography: Convert Figma/Sketch pixel mockup specifications into responsive rem CSS units.
  • Tailwind Spacing Calibration: Verify spacing classes (e.g. p-4 = 1rem = 16px, p-6 = 1.5rem = 24px).
  • Web Accessibility (a11y) Auditing: Replace fixed px font declarations to comply with WCAG 1.4.4 Resize Text criteria.

Frequently Asked Questions

What is the difference between rem and em?

rem is relative to the root <html> element font size; em is relative to the font size of its immediate parent element.

Why do designers use the 62.5% CSS font-size trick?

Setting font-size: 62.5% on <html> makes 1rem equal to 10px (instead of 16px), simplifying mental math (e.g. 1.6rem = 16px).

Should I use rem for padding and margins?

Yes, using rem for spacing ensures your entire layout scales proportionally when users increase browser zoom or text size.

Related Calculators & Tools