rem to px Converter

In CSS, px and rem are units of measurement used to specify sizes for elements like fonts, margins, padding, width, and height.
Convert px to rem instead
Value rem
Base px
Step px
1.5rem = 24px
Conversion Table
0.125rem
=
2px
0.25rem
=
4px
0.375rem
=
6px
0.5rem
=
8px
0.625rem
=
10px
0.75rem
=
12px
0.875rem
=
14px
1rem
=
16px
1.125rem
=
18px
1.25rem
=
20px
1.375rem
=
22px
1.5rem
=
24px
1.625rem
=
26px
1.75rem
=
28px
1.875rem
=
30px
2rem
=
32px
2.125rem
=
34px
2.25rem
=
36px
2.375rem
=
38px
2.5rem
=
40px
2.625rem
=
42px
2.75rem
=
44px
2.875rem
=
46px
3rem
=
48px
3.125rem
=
50px
3.25rem
=
52px
3.375rem
=
54px
3.5rem
=
56px

What is px in CSS?

A px (pixel) is an absolute unit of measurement that represents a single dot on a screen. It’s a fixed size, which means it doesn’t change relative to other elements or the user’s browser settings.
Example: font-size: 16px; will make the text 16 pixels high.
Pros 👍
  • Easy to use and understand.
  • Predictable because the size remains constant.
Cons 👎
  • Does not scale with user preferences. If a user has increased their browser’s default font size for accessibility, px values will not adjust.
  • Less flexible for responsive design, since it’s not relative to other units or container sizes.

What is rem in CSS?

A rem (Root EM) is a relative unit of measurement. It’s relative to the root element’s font size, which is usually the <html> element.
By default, most browsers set the <html> font size to 16px. Therefore, 1rem would equal 16px unless otherwise specified.
Example: font-size: 1.5rem; would be 1.5 times the root font size, which would typically be 24px (if the default is 16px).
Pros 👍
  • Scales with the user’s settings. If the user changes the default font size, rem values will scale accordingly, improving accessibility.
  • Useful for creating consistent spacing and sizing throughout a project because it always refers to the root size.
Cons 👎
  • Might be slightly more complex to understand if you're not familiar with how it calculates relative values.

When to use px

  • You need pixel-perfect control (e.g., for elements like borders or icons where size should be precise).
  • Consistency is more important than scalability (e.g., for tiny design elements that should remain unchanged).
  • You are working with designs that have specific pixel specifications.

When to use rem

  • You want your design to be scalable and adapt to user settings, improving accessibility.
  • You want a responsive design that adjusts easily when the root font size changes (e.g., when switching between mobile and desktop views).
  • You want to maintain consistency across a project. Using rem makes it easier to create a modular scale, where changing the root size will adjust all related elements proportionally.

Browser Defaults and Best Practices

  • The default browser font size is usually 16px, but users can modify this in their browser settings. Using rem allows for automatic adjustments based on these preferences.
  • A common practice is to set the <html> font size to 62.5% (which equals 10px by default) so that 1rem = 10px, making calculations easier.