PX ↔ REM Converter
Convert between pixels and REM units instantly. Configurable base font size.
| Pixels | REM | Common Use |
|---|
The PX to REM Converter converts between pixel and REM units instantly. Set your base font size and get accurate conversions for responsive CSS development. Includes a quick reference table and supports batch conversion of multiple values at once.
What This Tool Does
Modern CSS best practices recommend using REM units for font sizes, spacing, and layout instead of fixed pixels. REM units scale with the user's browser settings, improving accessibility and making responsive design easier. But converting pixel values from design specs to REMs requires math - dividing by the base font size for every value. This tool does that calculation instantly. Enter pixel values and get REMs, or enter REMs and get pixels. Batch convert multiple values at once and use the quick reference table for common sizes.
Why Use This Tool
REM units are the recommended approach for modern CSS, but most design tools still output values in pixels. Every time you implement a design, you need to convert pixel values to REMs. With a 16px base, some conversions are easy (16px = 1rem, 32px = 2rem), but others require division (18px = 1.125rem, 14px = 0.875rem). This tool eliminates the mental math. It also includes a quick reference table for common sizes, making it a handy desk reference during front-end development sessions.
How to Use
- Set your base font size (default is 16px) in the settings.
- Enter pixel values on the left to convert to REM, or REM values on the right to convert to pixels.
- Conversions happen instantly as you type.
- Use the quick reference table for common size conversions.
Common Use Cases
- Converting design specs from Figma or Sketch (pixels) to CSS (REMs)
- Checking REM values during front-end development
- Creating consistent typography scales with REM units
- Migrating a CSS codebase from pixels to REMs
- Quickly referencing common PX-to-REM conversions during coding
Example
Tips
- Keep the base at 16px unless your project explicitly sets a different root font size in CSS
- Batch convert by entering multiple pixel values (one per line) for rapid design implementation
- Bookmark the quick reference table - the common sizes (10-64px) cover 90% of typical designs
Frequently Asked Questions
What is the formula for PX to REM?
REM = pixels / base font size. With a 16px base: 24px = 1.5rem, 32px = 2rem, 48px = 3rem.
What base font size should I use?
Most browsers default to 16px. Use 16 unless your project sets a different root font size in CSS.
Is it free?
Yes, completely free. No sign-up required.
Can I convert multiple values at once?
Yes. Enter multiple pixel values (one per line) and all are converted simultaneously.
Is my data private?
Yes. All conversions happen in your browser. Nothing is sent to any server.