Px to Rem Converter

Why convert px to rem

Pixel is absolute: 16px is always 16px, regardless of the user. rem is relative to the root font size (16px by default). When users increase browser font size for legibility, px values do not change but rem values do. That is why rem is the recommended unit for typography and spacing.

The formula

rem = px / base

With base 16: 16px = 1rem, 24px = 1.5rem, 32px = 2rem. To simplify the math, you can change the base to 10px with html { font-size: 62.5%; }: 24px = 2.4rem, 32px = 3.2rem. An old trick but still valid if dividing by 16 bothers you.

When to use rem

• Typography: font sizes, line-heights.
• Spacing: padding, margin, gap.
• Max widths: container and prose max-widths.
• Border radius: so it scales with the system.

When NOT to use rem

• Border widths: 1px hairline must always be 1px.
• Shadows: blur and offsets typically in px.
• Small icons: when you don't want them scaling with text zoom.
• Pixel-perfect grids: when exact precision is needed.

Accessibility

One of the strongest reasons to use rem is accessibility. About one in five users changes the default font size in their browser (preference or visual difficulty). If your site uses px everywhere, those users see exactly the size you set. With rem, everything scales. This is measured in accessibility audits and improves your Lighthouse score.

Common mistakes

• Mixing units without rules: px here, rem there with no logic. Pick a convention and stick to it.
• Using rem for everything: including hairline borders. Loses precision.
• Forgetting rem is relative: change the root font-size and everything changes. Useful when planned, problematic when not.

Practical table with base 16

12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem, 64px = 4rem. Memorizing the most common conversions speeds up daily work.