PX ↔ REM Converter

About PX to REM Converter

Convert between pixels (px) and rems (rem) — the two most common CSS units. Browser default is 16px = 1rem, so 24px = 1.5rem, 8px = 0.5rem, etc. The converter handles both directions and shows the math, so you can verify or learn by example.

How It Works

1. Enter a pixel value to see the rem equivalent (or vice versa)
2. Adjust the base font size if your project uses something other than the default 16px
3. Copy the result into your CSS with the unit you need

Common Use Cases

• Building accessible CSS that respects user font-size preferences
• Migrating a pixel-based stylesheet to rem-based for accessibility
• Translating Figma/Sketch px values to CSS rem during handoff
• Generating type scales where every step is mathematically related

Why Use StudioLimb's PX to REM Converter

• Handles both directions — px to rem AND rem to px
• Configurable base size for projects using non-default 14px or 18px roots
• Shows the calculation so you understand the math, not just the result
• Free and runs entirely in your browser

Frequently Asked Questions

Why use rem instead of px?

Rem respects the user's browser font size preference. A user with vision impairment can set their browser to "Large" and rem-based text scales up. Pixel-based text doesn't. WCAG 1.4.4 requires text be resizable to 200% — rem makes this trivial.

What is the default base size?

16px in every modern browser. Some sites set "html { font-size: 14px }" but this breaks the user's zoom preference and is no longer recommended.

Should I use rem for everything?

Not for borders or box-shadows (use px for pixel-perfect rendering). Use rem for typography, padding, margin. The accessibility rule is about readable text, not visual decoration.

Learn more in our PX to REM Conversion Guide.