Px to Rem Converter
Convert between px, rem, and em CSS units with a configurable base font size. Includes a reference table for common conversions and one-click copy.
How to Use Px to Rem Converter
- Select a conversion mode: Px to Rem, Rem to Px, or Em ↔ Px using the tabs at the top.
- Enter your value in the input field — the conversion happens in real time as you type.
- Adjust the base font size (default 16px) using the dropdown or enter a custom value to match your project's root font size.
- Click the copy button to copy the result. Scroll down for a full reference table of common px to rem conversions.
About Px to Rem Converter
The Px to Rem Converter is a free online tool that converts between the three most commonly used CSS length units: pixels (px), root em (rem), and em. Understanding these units is critical for building responsive, accessible websites. Rem units are relative to the root element's font size (typically 16px) and are the recommended unit for font sizes because they respect user browser preferences — if a user increases their default font size for accessibility, rem-based designs scale properly. Em units are relative to the parent element's font size, making them useful for component-scoped scaling but prone to compounding in nested elements. Pixels are absolute units ideal for borders, shadows, and elements that shouldn't scale. The conversion formulas are simple: rem = px ÷ root font size, and em = px ÷ parent font size. This tool handles all three conversions with a configurable base size, provides a comprehensive reference table, and runs 100% client-side in your browser — no server calls, complete privacy.
Frequently Asked Questions
How do I convert px to rem?
Divide the pixel value by the root font size (default 16px). Formula: rem = px ÷ 16. Examples: 8px = 0.5rem, 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem. If your root font size is different, divide by that value instead.
What is 1 rem in pixels?
By default, 1rem = 16px because browsers set the root font size to 16px. If you change the root font size in your CSS (e.g., html { font-size: 18px; }), then 1rem equals whatever you set. Our converter lets you adjust the base font size to match your project.
What is the difference between rem and em in CSS?
Rem is always relative to the root (html) element's font size — it's consistent everywhere. Em is relative to the current element's parent font size, so it compounds when elements are nested (e.g., 1.2em inside 1.2em = 1.44× the grandparent's size). Use rem for predictable, global sizing; use em for component-relative sizing.
Should I use px or rem for font sizes?
Use rem for font sizes — it respects user accessibility preferences. When a user increases their browser's default font size, rem-based text scales proportionally while px-based text stays fixed. Use px for borders, box-shadows, outlines, and micro-adjustments that shouldn't scale with font preferences.
Why is 16px the default root font size?
All major browsers (Chrome, Firefox, Safari, Edge) set the default root font size to 16px. This has been the standard since the early days of CSS. Users can change this in their browser settings for accessibility. Using rem units ensures your design respects this preference.
What is 14px in rem?
At the default 16px root font size: 14px = 0.875rem (14 ÷ 16 = 0.875). This is one of the most commonly searched conversions. Other popular ones: 10px = 0.625rem, 12px = 0.75rem, 18px = 1.125rem, 20px = 1.25rem.
Is my data stored or tracked?
No. The Px to Rem Converter runs 100% client-side in your browser. No data is ever sent to any server. Complete privacy is guaranteed.
Related Tools
Was this tool helpful?