locolory

The Locolory toolkit / Pixels to REM / EM

Pixels to REM / EM Converter

Move between fixed and relative CSS units with confidence. Set the real context, see every result, and copy clean values instantly.

Pixels to REM / EM Converter is a free browser-based utility that move between fixed and relative CSS units with confidence; Set the real context, see every result, and copy clean values instantly.

  • Core logic: divide pixels by the configured root size for rem or parent size for em, with bidirectional conversion.

No software download, login, or server upload required. Computations execute locally on device.

Unit converter

Conversion direction
px
px

16 px is the common browser default; your project may differ.

px24
rem1.5
em1.5
Live text-size preview

Make every size count.

24px · 1.5rem · 1.5em

How the conversion works

Pixels are fixed screen units. Divide pixels by the root font size to get REM, or by the parent font size to get EM. For example, 24 px ÷ 16 px equals 1.5 rem.

This PX to REM converter also handles REM to PX: at the default root, 16px to REM is 1rem. The reference table makes common Tailwind REM to PX values easy to compare.

Use the actual font-size context from your CSS. A custom root or parent value changes the result immediately, without uploading or sending anything.

PX to REM conversion reference

PixelsREMTypical Tailwind class
8px0.5remtext-[8px]
12px0.75remtext-xs
14px0.875remtext-sm
16px1remtext-base
20px1.25remtext-xl
24px1.5remtext-2xl
32px2remtext-3xl
48px3remtext-5xl

These values use the default 16px root. Tailwind theme values can be customised.

Your input shapes the next update

Spotted something? Tell us.

A short note opens in your email app, ready to send to hello@locolory.store.

What would you like to share?
Have a screenshot? Attach or paste it in the email draft.0/3,000

Good questions. Clear answers.

What is the difference between REM and EM in CSS?

REM is relative to the document's root font size. EM is relative to the current element's inherited font size, so nested EM values can compound.

What is the 62.5% base font size trick?

Setting html { font-size: 62.5%; } changes a 16 px browser default to 10 px, making 1rem equal 10px. It simplifies mental arithmetic, but only while that root percentage and browser default apply.

Why should I use REM instead of PX for accessibility?

REM-based text and spacing can follow a visitor's browser font-size preference, while fixed pixel values do not scale from that preference in the same way. Keep the root relative so users can enlarge content comfortably.

What root size should I use?

Browsers normally use 16 px unless the visitor or site changes it. Enter the root size used by your project rather than assuming 16 px.

Does changing the parent size affect REM?

No. Parent size affects EM. REM continues to use the root size, which makes it useful for consistent spacing and typography across a page.

How precise are the results?

Results are calculated in your browser and shown with up to six useful decimal places. Trailing zeroes are removed for clean CSS values.

Can I convert REM or EM back to pixels?

Yes. Choose the input unit, enter the value, and the converter recalculates pixels and the other relative unit immediately.