PX to REM Converter: px, rem, em, pt, vw and vh in CSS

What is it?

The PX to REM Converter changes CSS sizes from one unit to another. It converts between px, rem, em, pt, vw, vh and %.

Who is it for?

Front-end developers and designers converting design sizes into accessible CSS units.

How to use it

1. Type the Value and pick From.
2. Set the Root font size (px) (16 in browsers by default), the Parent font size (px) for em, and the Screen width and height for vw and vh.
3. Copy a result, or use the Quick table: px → rem at your root size.

Which unit when?

• rem for font sizes and spacing: it respects the visitor’s browser text-size setting, which helps accessibility.
• em for things that should grow with their own text, like button padding.
• px for borders and fine details.
• vw/vh for full-screen sections; on phones, dvh handles the moving address bar better than vh.
• pt is for print stylesheets.

The 62.5% trick

Setting html { font-size: 62.5%; } makes 1rem = 10px for easier maths. Set the root size to 10 here if your site does that.

Worked examples (root 16 px)

• 24 px = 1.5 rem; 14 px = 0.875 rem; 40 px = 2.5 rem.
• Inside a 20 px parent, 30 px = 1.5 em.
• On a 375 px wide phone, 100% width = 100 vw = 375 px, so 15 px ≈ 4 vw.

Why rem helps accessibility

Some visitors set a larger default text size in their browser or phone. Sizes in rem grow with it; sizes in px don’t. Use rem for text and spacing so pages stay readable for them.

Common mistakes

• Nesting em sizes compounds: 1.2 em inside 1.2 em is 1.44 times. Use rem to avoid surprises.
• Using 100vh on phones: the address bar changes the visible height. Use 100dvh where supported.

Open the tool: PX to REM Converter

Still stuck?

Contact support. Tell us which tool or page you were using, what you tapped, what you saw, and your phone or computer and browser (for example: Android phone, Chrome). We reply by email.