PX to REM Converter

What this tool does

PX to REM Converter converts any list of values between pixels and rem/em units against a chosen root font size (the browser default is 16px), in either direction, letting you convert a whole batch of design spec values at once rather than one calculation at a time.

A design file specifies font sizes and spacing in pixels, but modern, accessible CSS generally prefers rem units (which scale with a user’s browser font-size setting), converting a whole list of design values one at a time by hand is slow.

This tool converts a whole list of values at once, in either direction, against your chosen root font size (16px, the browser default, unless your project sets a different base), pasting a design spec’s pixel values and getting back a ready rem/em list.

How to use PX to REM Converter

1. Set your project’s root font size (16px unless your CSS sets html { font-size: ... } to something else).
2. Choose the conversion direction and target unit (rem or em).
3. Paste your list of values, one per line.
4. Copy the converted output.

Tips for better results

• rem units are always relative to the root (html element’s) font size, regardless of nesting depth, while em units are relative to the font size of the element they’re applied to (or its parent, for most properties), this difference matters for nested components.
• rem units scale with a user’s browser font-size accessibility setting, which fixed px values ignore entirely, this is the main reason rem is generally recommended over px for font sizes and spacing in modern CSS.
• If your project sets a non-default root font size (some projects use 62.5% or similar tricks to make 1rem = 10px for easier mental math), make sure to enter that actual effective root size here, not always 16.
• Converting a whole design spec’s worth of values at once (rather than one calculation per value) is much faster for setting up a new component’s CSS variables or Tailwind config.

Common use cases

• Converting a design file’s pixel-based spacing and typography scale to rem for a CSS implementation.
• Checking what an existing rem-based value equals in pixels for comparison with a design spec.
• Converting an entire batch of values at once rather than calculating each individually.
• Understanding the practical difference between em and rem units with real converted numbers.

Common mistakes to avoid

• Assuming the root font size is always 16px without checking the project’s actual CSS; some projects deliberately set a different html { font-size } (like 62.5% for easier 10px-based mental math), always confirm the real effective base before converting.
• Confusing em and rem, em is relative to the element’s own (or parent’s) font size and can compound unpredictably through nested components, while rem is always relative to the fixed root size regardless of nesting.
• Converting values one at a time by hand when a whole list of design spec values needs converting, this tool is specifically built to handle a batch of values in one pass.