px ↔ rem Converter

Convert px and rem values bidirectionally based on a root font size.

Category: Converters

When to use?

Use it during CSS work to convert design px values to rem, or to check how many px a rem value is. Especially useful in projects using rem for accessibility.

How to use

  • Enter the base font size (default: 16px).
  • Enter px to get rem, or rem to get px, auto-converted.
  • Copy the result for your CSS.

Input Explanation

The base font size is usually the html element's font-size. The default is 16px and can be changed for your project.

Calculation Basis

rem = px ÷ base font size. e.g. 24px ÷ 16 = 1.5rem. Conversely, px = rem × base font size.

Usage Examples

  • Convert CSS sizes - Convert 24px to 1.5rem on a 16px base.
  • Tidy design tokens - Convert design px values into rem-based styles.
  • Support accessibility - Convert fixed px to rem so it responds to the user's font size setting.

Examples

  • Base 16px: 24px → 1.5rem
  • Base 16px: 1rem → 16px, 0.875rem → 14px

Cautions

  • Malformed input can cause parsing errors or broken output.
  • A mismatched base font size will shift all converted values.

Guides

px to rem formula

rem is based on the HTML root font-size. With a 16px default, 1rem=16px and 2rem=32px. Changing the base font size changes the conversion.

Use in responsive design

px is an absolute size regardless of screen, while rem scales with the user's browser font setting. Using rem is recommended for accessibility.

FAQ

Can I change the base font size?

Yes, enter your project's base value besides the default 16px.

Are decimal rems calculated?

Yes, shown rounded to up to 6 places.

Why use rem?

When users increase the browser default font size, rem-based elements scale with it, improving accessibility.

Where does 16px come from?

Most browsers default to a 16px font size, so 1rem equals 16px.

Related Tools