Convert pixel values to responsive REM units instantly. Perfect for building scalable, accessible web applications with responsive typography and spacing.
REM Formula:Pixels ÷ Base Size = REM
Example:32px ÷ 16px = 2rem
REM units provide better scalability, improved accessibility, and more maintainable responsive designs.
REM units respect user font size preferences, making your site accessible to all users, including those with visual impairments.
Scale your entire layout by changing just the root font size, making responsive design easier and more maintainable.
Maintain harmony across your design by using a consistent base unit, ensuring proportional spacing and typography.
Relative units are recommended by modern web standards and best practices, ensuring your code remains relevant.
Browsers handle REM calculations efficiently, and they're more cache-friendly in CSS files.
Easier to work with when building design systems and component libraries with consistent sizing scales.
| Pixels (px) | REM (÷16) | Use Case |
|---|---|---|
| 12px | 0.75rem | Small text, captions, labels |
| 14px | 0.875rem | Small body text, annotations |
| 16px | 1rem | Base body text, standard |
| 18px | 1.125rem | Large body text, emphasis |
| 20px | 1.25rem | Subheadings, medium emphasis |
| 24px | 1.5rem | Section headings |
| 28px | 1.75rem | Large headings |
| 32px | 2rem | Major headings, page titles |
| 36px | 2.25rem | Large hero titles |
| 48px | 3rem | Extra large hero text |
Copy and paste this SCSS function into your stylesheets to automatically convert PX values to REM in your code.
// SCSS Function to convert PX to REM
@function rem($px, $base: 16px) {
@return ($px / $base) * 1rem;
}
// Usage examples:
// font-size: rem(24); // 1.5rem
// padding: rem(16) rem(8); // 1rem 0.5rem
// margin: rem(20); // 1.25rem
// width: rem(100); // 6.25rem
// In actual styles:
.heading {
font-size: rem(32); // 2rem
}
.button {
padding: rem(12) rem(24); // 0.75rem 1.5rem
border-radius: rem(8); // 0.5rem
font-size: rem(16); // 1rem
}
.card {
padding: rem(20); // 1.25rem
margin-bottom: rem(16); // 1rem
border-radius: rem(12); // 0.75rem
}$base parameter to match your project's root font sizerem(16) instead of manually calculating 1remmargin: rem(8) rem(16)@function rem($px) {
@return ($px / 16) * 1rem;
}$spacing: (8, 16, 24, 32, 48)Join thousands of curious minds discovering awesome content every day. No spam—just the good stuff!