How many pixels is 1rem?

In most browsers 1rem equals 16px unless the root font size is changed. This calculator lets you set that base.

What is the difference between rem and em?

rem is relative to the root html font size. em is relative to the parent font size, so nested em values compound.

Should I use rem or px?

Use rem for font sizes and most spacing so text respects user settings. px is fine for borders and fine details.

How do I convert px to rem by hand?

Divide the pixel value by the root font size. With the default 16 px, 24 px ÷ 16 = 1.5 rem.

What viewport size should I enter?

The screen width and height you are designing for, such as 1440 × 900 for a laptop or 390 × 844 for a phone.

PX to REM Converter

Convert pixel values to REM, EM, VW, VH, and percentage units with customizable base root font sizes and viewport dimensions.

Base Font Size:px

Viewport (W×H):×px

Enter CSS Dimension

Pixelspx

16px

Click to copy

Root EMrem

1rem

Click to copy

Parent EMem

1em

Click to copy

Viewport Widthvw

0.8333vw

Click to copy

Viewport Heightvh

1.4815vh

Click to copy

Percentage%

100%

Click to copy

CSS snippet

font-size: 1rem; /* 16px @ 16px root */

How to use CSS Unit Converter

Enter a value and select its source unit (px, rem, em, vw, vh, %).
Set your base root font size (default 16px).
Copy the converted CSS unit values.

About PX to REM Converter

Convert between px, rem, em, vw, vh, and percent for CSS. Set your root font size and viewport size, enter a value in any unit, and copy the equivalent in all the others or as a ready-made CSS snippet.

rem, em, and px

1 rem equals the root font size, which is 16 px in every browser by default. So 24 px is 1.5 rem and 12 px is 0.75 rem. Using rem for font sizes and spacing lets text scale when a user increases their browser's default font size, which helps accessibility.

em is relative to the font size of the element's parent, so nested em values multiply. The converter assumes the parent uses the root size; adjust the base if your component sets a different font size.

Viewport units and percent

vw and vh are percentages of the viewport's width and height: on a 1440 px wide screen, 1 vw is 14.4 px. Set the viewport size to the screen you are designing for.

Percent here is calculated against the base font size, which matches how percentages work for font-size. Percentages for width and height depend on the parent element's size instead.

Common uses

Design handoff: Turn pixel values from a design file into rem for CSS.
Responsive type: Work out vw values for fluid headings.
Refactoring CSS: Convert a stylesheet from px to rem.
Tailwind and design systems: Match px values to rem-based spacing scales.

Questions about CSS Unit Converter

How many pixels is 1rem?: In most browsers 1rem equals 16px unless the root font size is changed. This calculator lets you set that base.
What is the difference between rem and em?: rem is relative to the root html font size. em is relative to the parent font size, so nested em values compound.
Should I use rem or px?: Use rem for font sizes and most spacing so text respects user settings. px is fine for borders and fine details.
How do I convert px to rem by hand?: Divide the pixel value by the root font size. With the default 16 px, 24 px ÷ 16 = 1.5 rem.
What viewport size should I enter?: The screen width and height you are designing for, such as 1440 × 900 for a laptop or 390 × 844 for a phone.

More tools like CSS Unit Converter

Comments

Questions, ideas, or a bug in CSS Unit Converter? Let us know.