px to rem converter
Convert px to rem for any root font-size — live, bidirectional, no upload.
Runs 100% in your browserLive single-value preview:
How to convert px to rem
- Set the root font-size. Default is 16. Change if your project sets a non-default html { font-size }.
- Enter pixels. Type px values one per line, or use the slider.
- Copy the rem values. Click Copy to grab the rem column.
px and rem in practice
Modern design systems set typography and spacing in rem so user font-size
preferences and browser zoom translate cleanly. Components built in px ignore the
user's accessibility settings. A common pattern: keep the root at 16px (the browser default),
use rem for body type and spacing, use em where you want a value to
scale with its containing element's font-size (e.g. icon size next to text). This converter
handles both the bulk case (paste a list of px values) and the single-value tweak.
Frequently asked questions
- A CSS length unit equal to the root element's font-size. Browsers default the root to 16px, so 1rem = 16px unless an explicit html { font-size } overrides it.
- rem scales with the user's preferred font size. When a user bumps their browser zoom or font-size up, every rem-based dimension grows with it — better accessibility than fixed pixels.
- rem is relative to the root font-size. em is relative to the current element's font-size, so it compounds — nested em values multiply.
- That sets the root to 10px so 1rem = 10px (more readable maths). Set the base size below to 10 and the conversions match.