PX to REM Converter
The PX to REM Converter lets you instantly switch between pixel (px), root em (rem), and em values for any given root font size. Pixels are absolute units fixed to screen resolution, while rem units scale relative to the root element's font size — typically 16px in most browsers. This makes rem the preferred unit for responsive, accessible web design.
Designing with rem and em instead of px ensures your layouts and typography scale gracefully when users change their browser's default font size, which is crucial for accessibility compliance. Enter any value in px, rem, or em alongside your project's base font size and instantly see the equivalents for all three units.
How it works
rem = px ÷ base; px = rem × base; em = px ÷ parent-font-size (treated as base here). Default base is 16px (browser default).
Use cases
- Converting design-tool pixel values to rem for CSS stylesheets
- Ensuring accessible typography that scales with user font preferences
- Setting spacing tokens (margin, padding, gap) in rem for responsive layouts
- Checking that component sizes remain consistent across different base font sizes
- Translating legacy px-based codebases to modern rem/em units
Frequently asked questions
How do I convert px to rem with a 16px base?
Divide the pixel value by the base font size: rem = px ÷ base. With the default 16px base, 24px becomes 24 ÷ 16 = 1.5rem, and 8px becomes 0.5rem. To go the other way, multiply the rem value by the base: 1.5rem × 16 = 24px.
What is the difference between rem and em in CSS?
Rem is always relative to the root element's font size, while em is relative to the font size of the element's parent. This means em values can compound when elements are nested, whereas rem stays predictable across the whole page. This converter treats the parent font size as equal to the base, so px, rem, and em can be compared directly.
Why is 16px the default base font size?
Most browsers ship with a default root font size of 16px, so 1rem equals 16px unless you or the user changes it. That is why 16px is the standard base used in px-to-rem conversions. If your project sets a different root font size in CSS, enter that value as the base to get accurate results.
How many rem is 24px, 32px, or 40px?
With the default 16px base, 24px = 1.5rem, 32px = 2rem, and 40px = 2.5rem. These equivalents change if your root font size differs — for example, with a 10px base, 24px would be 2.4rem. Always confirm your project's base before converting.
Should I use px or rem for font sizes?
Rem is generally preferred for font sizes and spacing because it scales when users increase their browser's default font size, which is important for accessibility. Pixel values stay fixed and ignore those user preferences. A common workflow is to take px values from design tools and convert them to rem in your stylesheets.