PX to REM Converter
Convert pixel values to rem and em as you type, one at a time or in bulk, based on your root font size.
Runs 100% in your browser
Shortcuts
- Copy the output
- Alt + Shift + C
Your input is saved in this browser only. Reset clears it.
How to use the CSS Unit Converter
-
Set your root font size (usually 16px).
-
Type a pixel value, or paste several values in Batch Conversion.
-
Copy the rem or em result.
Example: Converting a Figma value to rem
28px
1.75rem
The formula is px ÷ root font size: 28 ÷ 16 = 1.75. Paste a whole CSS block into Batch Conversion to convert every value at once.
Frequently Asked Questions
What is the difference between px and rem in CSS?
px (pixels) is an absolute unit — 16px always renders as 16 pixels regardless of user settings. rem (root em) is relative to the root font size, which defaults to 16px in most browsers. If a user increases their browser's base font size for accessibility, rem-based layouts scale with it while px-based layouts do not.
How do I convert px to rem?
Divide the pixel value by the root font size. With the default root font size of 16px: 16px ÷ 16 = 1rem, 24px ÷ 16 = 1.5rem, 32px ÷ 16 = 2rem. DevBottle's CSS Unit Converter lets you set a custom base font size and converts any pixel value instantly.
Should I use rem or em for font sizes?
Use rem for font sizes in most cases — it is predictable and always relative to the root, making it easy to reason about across a whole design system. Use em for spacing (padding, margin) inside components where you want spacing to scale proportionally with the component's own font size.
What is the default browser font size?
Most browsers default to 16px as the root font size, but users can change this in their browser accessibility settings. This is exactly why using rem units matters — your layout will respect the user's chosen font size preference, which is a core accessibility requirement.
About CSS Unit Converter
The CSS Unit Converter is an essential tool for modern web developers who need to convert pixel values from design tools like Figma, Sketch, or Adobe XD into responsive rem and em units. This conversion is crucial for creating accessible, scalable web designs that adapt beautifully across different devices and user preferences.
For the formula, a full conversion table, and ways to convert a whole stylesheet, read How to Convert PX to REM. Not sure which unit a property should use? See PX vs REM vs EM.
How CSS Unit Conversion Works
CSS unit conversion is based on a simple mathematical relationship between pixels and relative units:
- REM units: Relative to the root element's font size (typically 16px)
- EM units: Relative to the parent element's font size
- Conversion formula: rem/em = pixels ÷ base font size
- Example: 24px ÷ 16px = 1.5rem
Key Features
Single Conversion
Convert individual pixel values to rem and em units with instant results and one-click copying.
Batch Processing
Paste entire CSS blocks and convert all pixel values at once, perfect for large design systems.
Customizable Base Size
Adjust the base font size to match your project's root font size for accurate conversions.
Conversion Table
Quick reference table for common design measurements and typography scales.
Common Use Cases
- Figma to CSS: Convert design measurements to responsive units
- Typography scaling: Create consistent font size hierarchies
- Spacing systems: Convert margins and padding to scalable units
- Component dimensions: Make UI components responsive and accessible
- Design system migration: Convert existing pixel-based designs to rem/em
Best Practices for CSS Units
When to Use REM vs EM
- Use REM for: Font sizes, margins, padding, and layout dimensions
- Use EM for: Component-specific spacing that should scale with the component
- Use PX for: Borders, box shadows, and elements that shouldn't scale
Pro Tips for Responsive Design
Accessibility First: Using rem units ensures your design respects user font size preferences, improving accessibility for users with visual impairments.
Consistent Base: Stick to a 16px base font size unless you have specific requirements, as it's the browser default and most accessible.
Design System Integration: Use this tool to create consistent spacing and typography scales that work across your entire design system.
Conversion Examples
Start converting your pixel-based designs to responsive, accessible CSS units today. Simply enter your pixel values above and get instant rem and em conversions that will make your web designs more flexible and user-friendly.