How to Convert PX to REM in CSS
REM units make your CSS responsive to user font-size preferences. When a user increases their browser's default font size (for accessibility), REM-based layouts scale proportionally while pixel-based layouts remain fixed. Converting from PX to REM is simple math — but understanding when to use each unit matters more than the conversion itself.
- Convert pixel values to REM for responsive, accessible CSS.
- The Conversion Formula.
- Covers quick reference table.
- When to Use PX, REM, and EM.
- Covers setting up your root font size.
The Conversion Formula
REM = pixel value / root font size. The default root font size in all browsers is 16px. So: 24px = 24/16 = 1.5rem. 14px = 14/16 = 0.875rem. 48px = 48/16 = 3rem. If your root font-size is set to something other than 16px, use that value as the divisor instead. The PX to REM Converter handles this automatically — enter your base font size and any pixel value, and get the exact REM equivalent.
Quick Reference Table
Common conversions at 16px base: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem, 64px = 4rem. Bookmark this or use the converter tool for values in between.
transform and opacity for smooth 60fps performance. These properties are handled by the GPU compositor and skip expensive layout recalculations.When to Use PX, REM, and EM
Use REM for font sizes, spacing (margin/padding), and max-width values — anything that should scale with user preferences. Use PX for borders, shadows, and fine visual details where scaling would look wrong (a 1px border should stay 1px). Use EM for component-internal spacing that should scale with the component's font size (like padding on a button that adjusts when the button text size changes). Never use PX for body text font-size — it overrides user accessibility settings.
width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps.Setting Up Your Root Font Size
The cleanest approach is to leave the root font size at the browser default (16px) and use REM everywhere:
html { font-size: 100%; }
body { font-size: 1rem; }
Some developers set html { font-size: 62.5%; } to make 1rem equal to 10px (easier mental math), but this breaks the default scaling and can cause issues with third-party components that assume 16px. Stick with 16px and use the converter for non-obvious values.