How do I use the CSS px to rem Converter?

Set your base font size - 16px is the browser default, but change it if your project uses something different. Type a px value to get the rem equivalent, or a rem value to get px. The reference table at the bottom covers common sizes so you don't have to keep converting the same numbers.

Is the CSS px to rem Converter free?

Yes, the CSS px to rem Converter on ToolHaven is completely free to use. No signup or registration is required.

CSS px to rem Converter

Convert px to rem and rem to px for CSS. The default base is 16px but you can change it to match your project. There's also a quick reference table for common sizes so you're not constantly recalculating the same values.

Base font size (px)

Pixels (px)

REM (rem)

Quick reference (base 16px)

pxrempxrem8px0.5rem10px0.625rem12px0.75rem14px0.875rem16px1rem18px1.125rem20px1.25rem24px1.5rem32px2rem40px2.5rem48px3rem64px4rem

How to use

Set your base font size - 16px is the browser default, but change it if your project uses something different.
Type a px value to get the rem equivalent, or a rem value to get px.
The reference table at the bottom covers common sizes so you don't have to keep converting the same numbers.

Related tools:

In CSS, px is an absolute unit - 16px is always 16 pixels regardless of user preferences. rem (root em) is relative to the document root font size, which defaults to 16px in most browsers. 1rem = 16px by default. The advantage of rem is that if a user increases their browser default font size for accessibility, everything sized in rem scales up automatically, while px stays fixed.

Converting px to rem is a constant task when implementing a design spec that uses pixels. If your designer hands you a font size of 24px, that is 24/16 = 1.5rem in CSS. The calculator builds a reference table so you can see common values at a glance without doing the division every time.

Frequently Asked Questions

Why use rem instead of px?

rem respects user browser font size preferences. Users with vision difficulties often set browser font size to 18px or larger - sites using rem scale correctly, sites using px do not. rem is also good for consistent spacing that scales with text size. Accessibility guidelines (WCAG) lean toward relative units.

What is the difference between rem and em?

rem is always relative to the root (html) element font size. em is relative to the current element parent font size, which can cascade unpredictably in nested elements. rem is predictable; em is contextual.

How do I change the base font size?

Set font-size on the html element in CSS. Common choice: html { font-size: 62.5%; } which makes 1rem = 10px, turning 24px into a cleaner 2.4rem. Enter your base size in the calculator to generate the correct conversion table.