REM to PX Converter
Convert REM values to pixels instantly. Enter your REM value and base font size to get the exact pixel equivalent — free, no signup required.
Enter a REM value above to see the pixel equivalent
Formula: PX = REM × Base Font Size
What is REM to PX Conversion?
REM (Root EM) is a relative CSS unit that scales based on the root element's font size. PX (pixels) is a fixed unit. Converting REM to PX helps you understand exactly how large an element will be on screen, which is useful when working with design specs, debugging layouts, or communicating sizes to clients and teammates.
The formula is straightforward: PX = REM × Base Font Size. With the browser default of 16px, 1.5rem becomes 24px, 2rem becomes 32px, and so on.
How to Use the REM to PX Converter
- Enter your REM value in the REM Value field.
- Set the Base Font Size — default is 16px. Change this if your project uses a custom root font size.
- The pixel result appears instantly with the formula shown.
- Click Copy to copy the pixel value to your clipboard.
- Click Reset to clear all fields.
What is REM in CSS?
REM stands for Root EM. Unlike em which is relative to the parent element's font size, rem is always relative to the root <html> element's font size. This makes it predictable and consistent throughout your stylesheet.
- Browser default: Most browsers set the root font size to 16px, so 1rem = 16px unless overridden.
- Common override: Many developers set
html { font-size: 62.5%; }which makes 1rem = 10px for easier mental math (e.g., 1.6rem = 16px). - Accessibility: REM respects the user's browser font preference, unlike PX which ignores it.
REM to PX Conversion Table
Reference table using the standard 16px base font size.
| REM | PX (base 16px) | Common Use |
|---|---|---|
| 0.25rem | 4px | thin borders, tiny gaps |
| 0.5rem | 8px | small icons, tight padding |
| 0.75rem | 12px | captions, labels |
| 0.875rem | 14px | secondary text |
| 1rem | 16px | body text (browser default) |
| 1.125rem | 18px | comfortable reading size |
| 1.25rem | 20px | subheadings, h5 |
| 1.5rem | 24px | h4, card titles |
| 1.75rem | 28px | h3 |
| 2rem | 32px | h2, section headers |
| 2.5rem | 40px | h1, page titles |
| 3rem | 48px | hero headings |
| 4rem | 64px | display text |
PX vs REM — When to Use Each
Use REM for typography, padding, margin, and component sizing that should respond to user font preferences. Use PX for precise fixed values such as borders, shadows, and media query breakpoints where exact pixel accuracy is required.
Frequently Asked Questions
What is 1rem in pixels?
By default, 1rem equals 16px because most browsers set the root font size to 16px. The formula is: PX = REM × Base Font Size, so 1 × 16 = 16px.
Is 1rem always equal to 16px?
No. 1rem equals the root font size defined in your CSS. If you set html { font-size: 10px; }, then 1rem = 10px. The default browser font size is 16px, so 1rem = 16px in most cases.
How do I convert REM to PX?
Multiply the REM value by the base font size. For example, 1.5rem × 16 = 24px. Use our free REM to PX converter to get instant results without manual calculation.
Can I also convert PX to REM?
Yes. Use our PX to REM Converter at calcon.in/px-to-rem-converter/ to convert pixels to REM. The formula is: REM = PX ÷ Base Font Size.
What is REM in CSS?
REM stands for Root EM. It is a relative CSS unit that is based on the font size of the root HTML element. Unlike EM (which is relative to the parent element), REM is always relative to the root, making it predictable and easier to manage.
Does this REM to PX converter work on mobile?
Yes, this tool is fully responsive and works on all devices including smartphones, tablets, and desktops. No app download or installation required.
Related Developer Tools
Base64 Encoder / Decoder
Encode and decode Base64 instantly.
Border Radius Generator
Generate CSS border-radius visually with live preview.
Box Shadow Generator
Generate CSS box shadows visually with live preview.
Color Palette Generator
Create harmonious color palettes from any color.
Color Picker
Pick colors and get HEX, RGB, HSL, CMYK instantly.
CSS Formatter / Beautifier
Format and beautify CSS code instantly.
CSS Gradient Generator
Generate linear, radial, and conic CSS gradients visually.
CSS Minifier
Minify CSS code instantly in browser.
CSS to SCSS Converter
Convert flat CSS to idiomatic nested SCSS instantly.
HEX to RGBA Converter
Convert HEX colors to RGB/RGBA instantly.
Get new tools & guides
Occasional updates, no spam.
