PX↔REM Converter
Convert pixels to REM and back with a reference table and Tailwind CSS support. Custom base font size. Free.
No sign-up
·
100% free
·
Private
px (root font-size)
Px Rem Base
px
1rem
rem
16px
Px Rem Reference Table
| PX | REM | Px Rem Example |
|---|
Px Rem Tailwind Ref
| Tailwind | REM | PX |
|---|---|---|
| text-xs | 0.75rem | 12px |
| text-sm | 0.875rem | 14px |
| text-base | 1rem | 16px |
| text-lg | 1.125rem | 18px |
| text-xl | 1.25rem | 20px |
| text-2xl | 1.5rem | 24px |
| text-3xl | 1.875rem | 30px |
| text-4xl | 2.25rem | 36px |
Was this tool helpful?
Thank you for your feedback!
PX to REM Converter
The PX to REM Converter is a free online tool for web developers that converts between pixel (px) and rem units used in CSS. Enter a value in pixels and instantly see the equivalent in rem (based on your specified root font size), or enter rem to see pixels. The tool supports custom root font sizes (default 16px) and batch conversion of multiple values at once, making it indispensable for responsive web development workflows.In modern CSS, rem units (root em) are preferred over pixels for accessible design because they scale proportionally when users change their browser's default font size. One rem equals the root element's font size — typically 16px by default. Converting existing pixel-based designs to rem units improves accessibility and responsive behavior. The converter shows the exact equivalent: 16px = 1rem (at 16px root), 24px = 1.5rem, 32px = 2rem, and so on. Adjust the root font size to match your project's base size for accurate conversions.Front-end developers convert pixel values from design mockups (Figma, Sketch, Adobe XD) to rem for responsive CSS. CSS framework users translate utility class values between systems. Accessibility specialists verify that rem-based layouts scale correctly at different browser zoom levels. Design system engineers establish spacing and typography scales in rem units. Junior developers learning responsive design use the converter to build intuition about the px-to-rem relationship.PX to REM Converter is part of the facilita.tools developer toolkit. Available in Portuguese, English, and Spanish, optimized for desktop and mobile browsers.
Frequently Asked Questions
What is the difference between px and rem in CSS?
Pixels (px) are fixed-size units that don't change with user settings. REM (root em) units are relative to the root element's font size (usually 16px). REM is preferred for accessibility because it respects the user's browser font size preferences.
How do I convert px to rem?
Divide the pixel value by the base font size (default 16px). For example: 24px / 16 = 1.5rem. If your base font size is different, adjust accordingly: 24px / 14 = 1.714rem (for a 14px base).
Should I use px or rem for font sizes?
Use rem for font sizes, margins, and padding to ensure your layout scales with user preferences. Use px for borders, shadows, and small decorative elements where consistent sizing matters. This approach maximizes both accessibility and visual consistency.