PX to REM Converter

Client-Side New

Convert CSS units bidirectionally between px, rem, and em with a customizable root font size. Enter a value in any unit and instantly see the equivalent in all other units. Supports bulk conversion for multiple values at once. Includes a quick reference table for common conversions. Essential for responsive design workflows where rem-based sizing ensures consistent scaling.

PX to REM

REM to PX

Bulk Conversion

Quick Reference (base: 16px)

PXREM
8px0.5rem
10px0.625rem
12px0.75rem
14px0.875rem
16px1rem
18px1.125rem
20px1.25rem
24px1.5rem
28px1.75rem
32px2rem
36px2.25rem
40px2.5rem
48px3rem
56px3.5rem
64px4rem
72px4.5rem
80px5rem
96px6rem

How to Use

  1. 1

    Set Root Font Size

    Enter your root font size (default 16px) to match your project settings.

  2. 2

    Enter a Value

    Type a px value to see rem/em equivalents, or type rem to see px.

  3. 3

    Use Quick Reference

    Consult the reference table for common px-to-rem conversions.

Examples by Niche

Font Sizing

14px → 0.875rem (at 16px root) for small body text

Spacing

24px → 1.5rem for consistent component padding

Custom Root

20px at 10px root → 2rem (custom root font size)

Frequently Asked Questions

What is the default root font size?

The default root font size is 16px, which is the browser default. You can change this to match your project if you have set a different root font size.

Should I use rem or px?

rem is recommended for most spacing and font sizes because it scales with the user browser font size setting, improving accessibility. Use px only for borders, shadows, and elements that should not scale.

Can I convert multiple values at once?

Yes, the bulk conversion mode lets you enter multiple pixel values (comma-separated) and converts all of them to rem simultaneously.

Why should I use rem units instead of pixels?

Rem units respect the browser font size preference set by the user, which is critical for accessibility. If someone increases their default font size from 16px to 20px, rem-based layouts scale proportionally while pixel-based layouts stay fixed. Using rem also makes responsive design easier since you can adjust the root font size at different breakpoints to scale the entire layout.

Related Tools

Spacing Scale Calculator

Generate consistent spacing scales based on a base unit for design systems.

Related Articles

Free Typography Tools for Web Designers: Font Pairing, Type Scales, and Text Styling

A practical guide to free typography tools for web designers and developers. Learn how to pair fonts, calculate type scales, convert CSS units, and style text — all without paid software.

12 Free CSS Generators Every Web Designer Should Bookmark in 2026: Build Layouts, Shadows, Gradients, and More Without Writing Code

Discover 12 free, browser-based CSS generators and design tools for web designers in 2026 — gradients, shadows, grids, flexbox, patterns, and layout utilities that replace paid design software.