How to convert px to rem, em and percent

Why the unit matters

Pixels are exact, and that is also their limit. A layout locked to px does not follow the font size the reader sets in the browser. rem is relative to the root font size, so type and spacing can scale together. em is relative to the element’s own font size, which is useful inside a component and easy to get wrong once rules nest.

The CSS Unit Converter does both jobs: one number across px, rem, em and %, and a whole CSS block from one unit to another. The base font size is yours to set. The usual browser default is 16px.

Step by step

1. Open the CSS Unit Converter. The first tab is named for the base size, 16px. The buttons 16px, 14px, 18px and 20px switch that base. Use the number field if the design system uses another value.
2. Stay on Unit Converter. Type a value and pick its unit. With the base at 16px, 24 in px becomes 24px, 1.5rem, 1.5em and 150%. Rounding is 4 decimal places, so the cards show 1.5000rem. Each card has its own Copy button.

   

3. In this mode, rem and em both divide by the base size you set. They are not reading a parent rule. That comes in the next mode.
4. Open CSS Code Converter. Leave From on px and To on rem, then paste the card block from the next section. At a 16px base the output is 1rem, 1.5rem, 0.5rem, 1.25rem and 0.75rem.

   

5. Copy the output and check it. The yellow note on the page is there for a reason: media queries and selectors the tool does not understand can be left wrong.

The block in the screenshot

.card {
  font-size: 16px;
  padding: 24px;
  margin: 8px;
}
.card .title {
  font-size: 20px;
  margin-bottom: 12px;
}

Padding of 24px becomes 1.5rem. The title at 20px becomes 1.25rem. A margin of 8px becomes 0.5rem, and 12px becomes 0.75rem.

Tips

• Set the base before you convert. 24px is 1.5rem only while the base is 16px. At 18px the same 24px is 1.3333rem.
• Keep a tab per project. Add Tab stores another base size. The tabs, the active mode and the rounding stay in the browser’s local storage.
• Use rem for type that should follow the reader. Padding and margins that should track the root size belong in rem too.
• Use em when the spacing belongs to the component. In the code converter, an em value follows the font-size the tool can see on that rule. In the unit table, em simply uses the base.
• Do not trust a huge stylesheet blindly. Convert a component, read the output, then paste it back.

FAQ

What base font size should I use?

16px, unless the design says otherwise. That is the usual browser default. The preset buttons cover 14px, 18px and 20px.

Why are rem and em equal in the table?

The unit table converts both from the base font size you typed. It does not look at a parent selector. Nested em is handled in CSS Code Converter.

Does 24px always equal 1.5rem?

Only at a 16px base. Change the base and the four cards update immediately.

Will every stylesheet convert cleanly?

No. The converter warns that complex selectors, media queries and some nesting can come out wrong. Read the output before you ship it.

Related tools

• CSS Unit Converter: the tool in this guide.
• SVG to CSS Converter: put an SVG icon into a background rule.
• Favicon Generator: build the site icons from one image.
• Web Tools: the rest of this category.

Try it now

Open the CSS Unit Converter, leave the base at 16px and type 24.