Pixel to Rem Converter
Convert between px and rem instantly. Adjust the base font size to match your project, use batch mode for multiple values, and copy CSS snippets directly into your code.
Input
Conversion updates instantly as you type.
Result
Primary conversion and CSS output.
Conversion
16px = 1rem
font-size: 1rem; /* 16px */
1rem
Batch Conversion
Paste multiple values (one per line or comma-separated) to convert them all at once.
Live Reference Table
Common pixel values and their rem equivalents at 16px base font size.
| Pixels (px) | Rem | CSS Snippet |
|---|
What Is Rem?
The rem unit stands for "root em." It is a relative CSS unit based on the font size of the root <html> element. In most browsers, the default root font size is 16px, which means 1rem = 16px unless you change the root.
The Formula
Converting between px and rem is straightforward:
- px to rem:
rem = px / base-font-size - rem to px:
px = rem * base-font-size
For example, with a 16px base: 24px / 16 = 1.5rem and 2rem * 16 = 32px.
Why Use Rem Over Px?
Using rem instead of px provides several key advantages for modern web development:
- Accessibility: Users who change their browser's default font size (for readability or visual impairment) will see your layout scale correctly when you use rem. Fixed px values ignore this preference entirely.
- Consistent scaling: Changing a single root font-size value scales your entire design proportionally. This makes responsive design much simpler.
- Predictability: Unlike
em, which compounds based on parent elements,remalways references the root. This avoids unexpected compounding when nesting elements. - Design tokens: Using rem with a standardized base (like 16px) aligns well with spacing scales (4px = 0.25rem, 8px = 0.5rem, 16px = 1rem) common in modern design systems.
When Px Is Still Appropriate
Not everything should be in rem. Borders (1px solid), box shadows, and other decorative properties are fine in px because they should not scale with font size. The general rule: use rem for anything related to spacing and typography, use px for fine visual details.
Frequently Asked Questions
How do I convert pixels to rem?
Divide the pixel value by the root font size. For example, with a 16px base, 24px equals 24 / 16 = 1.5rem. Enter your px value above and the converter does this instantly.
What is the default base font size in browsers?
All major browsers (Chrome, Firefox, Safari, Edge) default to a 16px root font size unless the user or a stylesheet overrides it with a rule on the html element.
Why should I use rem instead of px?
rem units scale with the user's preferred font size setting, making your site more accessible. Users who increase their default font size for readability will see your layout adapt properly when you use rem. This is especially important for WCAG compliance.
What is the difference between rem and em?
rem is always relative to the root html element's font size. em is relative to the parent element's font size, which can lead to compounding issues when elements are nested. For example, if a parent is 1.2em and a child is also 1.2em, the child ends up at 1.44x the root size. rem avoids this problem entirely.
Can I use rem for media queries?
Yes. Using rem in media queries respects the user's font size preference. A breakpoint at 48rem (768px at 16px base) will shift earlier for users with a larger base font size, which is the correct accessible behavior.
Privacy & Limitations
- All calculations run entirely in your browser -- nothing is sent to any server.
- Results are computed locally and should be verified for critical applications.
Related Tools
- SHA-256 Generator -- Generate SHA-256 hashes from text using Web Crypto API
- JSON to TypeScript Converter -- Generate TypeScript interfaces and types from JSON objects automatically
- HTML Entity Encoder/Decoder -- Encode and decode HTML entities
- JWT Encoder -- Create and encode JWT tokens with custom claims
Related Tools
View all toolsBig-O Notation Visualizer
Interactive plot of O(1) through O(n!) complexity curves with operation count comparison
JSON Formatter
Format and beautify JSON with proper indentation
JSON Validator
Validate JSON syntax and show errors
CSV to JSON Converter
Convert CSV data to JSON format with auto-detection
JSON to CSV Converter
Convert JSON arrays to CSV format with nested object handling
JWT Decoder
Decode JWT tokens and display header and payload
Pixel to Rem Converter FAQ
How do I convert pixels to rem?
Divide the pixel value by the root font size. For example, with a 16px base, 24px equals 24 / 16 = 1.5rem.
What is the default base font size in browsers?
All major browsers default to a 16px root font size unless the user or a stylesheet changes it. This means 1rem = 16px by default.
Why should I use rem instead of px?
rem units scale with the user's preferred font size setting, making your site more accessible. Users who increase their default font size for readability will see your layout adapt properly when you use rem.
What is the difference between rem and em?
rem is always relative to the root html element's font size. em is relative to the parent element's font size, which can lead to compounding issues when elements are nested. rem is generally more predictable.
Can I use rem for media queries?
Yes. Using rem in media queries respects the user's font size preference. A breakpoint at 48rem (768px at 16px base) will shift earlier for users with a larger base font size, which is the accessible behavior.