px ↔ rem Converter
Convert between px, rem, and em CSS units with a configurable base font size and quick-reference table.
About This Tool
The px to rem Converter is a free browser-based calculator that converts between the three most common CSS length units: pixels (px), root em (rem), and em. Understanding and using relative CSS units is essential for building responsive, accessible websites that scale properly across devices and user preferences.
Pixels are an absolute unit: 16px is always 16px regardless of
context. In contrast, rem is relative to the root
element's font size (the <html> element),
which browsers default to 16px. When a user changes their browser
font size for accessibility, layouts built with rem
scale accordingly while pixel-based layouts stay fixed, potentially
making content unreadable.
The em unit is relative to the parent element's
font size. When the parent is the root element, em
and rem are identical. However, em can
compound in nested elements, which makes rem the
preferred choice for most modern CSS. This tool shows both values
so you can pick the right unit for your context.
The conversion formula is simple: rem = px / base
and px = rem * base, where the base is the root font
size (typically 16px). You can change the base size to match your
project's configuration. Some CSS frameworks set the root to
10px (62.5%) for easier math, and this tool supports
that workflow. All calculations are performed entirely in your
browser — no data is ever sent to any server.
The quick-reference table displays common pixel values and their rem/em equivalents at a glance, which is useful when you are migrating an existing codebase from px to rem. The bulk converter lets you paste multiple values at once and convert them in a single step, saving you time during large-scale refactors.
How to Use
- Set the Base Font Size to match your project's root font size (default is 16px).
- Enter a pixel value in the px to rem/em panel to see the converted rem and em values instantly.
- Enter a rem value in the rem to px panel to see the equivalent pixel value.
- Browse the Quick-Reference Table for common conversions. Click any row to copy its values to your clipboard.
- Use the Bulk Converter to paste multiple px values (one per line or comma-separated) and convert them all at once. Click Copy Results to grab the output.
- Keyboard shortcut: Ctrl+Shift+C copies the most recent conversion result to your clipboard.
Popular px ↔ rem Examples
FAQ
What is the difference between rem and em?
rem is always relative to the root element's font size (the <html> tag), so 1rem is consistent everywhere on the page. em is relative to the font size of the parent element, which means it can compound in nested elements. For example, if a parent has font-size: 1.5em and its child also uses 1.5em, the child's computed size is 1.5 times 1.5 = 2.25 times the root size. Most modern CSS guidelines recommend using rem for predictability.
Why should I use rem instead of px?
Using rem respects the user's browser font size setting. If a user increases their default font size for accessibility reasons, rem-based layouts scale automatically while px-based layouts do not. The Web Content Accessibility Guidelines (WCAG) recommend using relative units for text sizing to ensure content remains readable for all users.
What base font size should I use?
The browser default is 16px, and most projects keep this value. Some developers set the root to 62.5% (10px) so that 1rem equals 10px for easier mental math, but this requires resetting body text to 1.6rem. Unless your project explicitly changes the root font size, stick with 16px.
Is my data safe?
Yes. All conversions are simple arithmetic operations performed entirely in your browser using JavaScript. No data is sent to any server, no cookies are set, and no third-party scripts are involved.
Can I use this tool for Tailwind CSS projects?
Absolutely. Tailwind uses rem-based spacing and sizing by default (with a 16px root). This converter is perfect for figuring out what Tailwind class corresponds to a specific pixel value, or for converting designs delivered in pixels to Tailwind's rem-based scale. For instance, 16px equals 1rem, which maps to Tailwind's text-base.
Related Tools
CSS Layout Generator
Visually build Flexbox and CSS Grid layouts with live preview and generated CSS code.
CSS Border Radius Generator
Design CSS border-radius values visually with per-corner control, live preview, and generated CSS code.
Box Shadow Generator
Design CSS box shadows visually with sliders for offset, blur, spread, and color. Multi-layer support.
Number Base Converter
Convert numbers between binary, octal, decimal, hexadecimal, and custom bases with bit visualization.
Flexbox Playground
Experiment with all CSS Flexbox properties visually. Configure container and item settings with live preview and generated CSS code.
Viewport Size Reference
Browse 60+ device viewport sizes for responsive web design. Compare iPhone, iPad, Android, laptop, desktop, and TV screen dimensions.
Font Stack Builder
Build CSS font-family stacks with drag-and-drop reordering, live preview, and popular presets for system, serif, sans-serif, and monospace fonts.
Math Expression Evaluator
Evaluate mathematical expressions with support for basic arithmetic, functions, and constants.
Tech Salary Converter
Convert between annual, monthly, biweekly, weekly, daily, and hourly salary rates.