PX → REM Converter

How to use the converter: step by step

1. 1
   Set your base font size
   Drag the slider or type a value to set the root font size. The browser default is 16px, but your project may use a different base. All conversions update instantly.
2. 2
   Choose conversion direction
   Select px to rem or rem to px using the toggle buttons in the settings bar. The single converter, batch converter, and scale tables all respect this direction.
3. 3
   Convert a single value
   On the Single tab, type any pixel or rem value and read the result immediately. Click the result to copy it to your clipboard.
4. 4
   Batch convert multiple values
   Switch to the Batch tab and enter values one per line. The results table shows each converted value: click any row to copy it, or use Copy all to grab every result at once.
5. 5
   Reference the type and spacing scales
   The Scale tab shows standard typographic sizes. The Tailwind tab shows the complete Tailwind CSS spacing scale with px and rem equivalents for your base size.

Frequently Asked Questions

What is the difference between px and rem in CSS?

px (pixels) is an absolute unit that does not scale with user preferences. rem (root em) is relative to the root element's font size: typically the html element. Using rem lets your layout respect a user's browser font size preference, improving accessibility.

Why should I use rem instead of px?

Users can change their browser's default font size for accessibility. rem units scale with that setting, so your layout and typography adjust accordingly. px values remain fixed, which can make text too small for users who rely on larger text.

What base font size should I use?

The browser default is 16px. Most projects leave this as-is, meaning 1rem = 16px. If your CSS sets a different base on the html element: for example font-size: 62.5% to make 1rem = 10px: set the base here to match your project.

How is the rem calculation done?

rem = px / base. So at a 16px base: 24px = 24 / 16 = 1.5rem. Going back: px = rem * base, so 1.5rem * 16 = 24px.

What is the Tailwind spacing scale?

Tailwind CSS uses a 4px grid where 1 spacing unit equals 4px. So p-4 = 16px = 1rem, p-8 = 32px = 2rem, and so on. The Tailwind tab shows the full scale with px and rem values for your selected base font size.

Can I batch convert a list of values?

Yes. Switch to the Batch tab, enter one value per line (numbers only, no units), and the results table updates instantly. Use Copy all to grab every result as a newline-separated list.

Does this tool handle em as well?

em and rem have the same numeric relationship to pixels at the root level. Use this calculator for em values when the element's parent font size equals the root font size: the math is identical.

Is this tool free to use?

Yes: AlteredIdea is completely free, requires no account, and runs entirely in your browser without sending any data to a server.

How do I convert 16px to rem?

Divide the pixel value by the base font size. At the default 16px base: 16px / 16 = 1rem. At a 10px base (using the 62.5% trick): 16px / 10 = 1.6rem. Set the base font size slider to match your project and the converter calculates it instantly.

What is the 62.5% font size trick and should I use it?

Setting html { font-size: 62.5%; } makes 1rem equal 10px at default browser settings, simplifying mental math (16px becomes 1.6rem instead of 1rem). It still scales with browser preferences unlike px. The drawback is it requires overriding the default font size on every project. Most modern teams using Tailwind CSS skip it because Tailwind handles rem values automatically.