px to rem converter

Convert between px and rem at any root size, both ways, with the sizes you actually use listed out underneath.

rem is relative to the root element, not to the parent, which is what makes it safe in a component. It also scales with the reader's own font size, and px does not: that is the whole reason to prefer it for type and spacing.
1px
2px
4px
8px
12px
14px
16px
18px
20px
24px
32px
40px
48px
64px
80px
96px
128px

Questions

Why prefer rem over px?+

Because rem scales with the reader's own font size and px does not. Someone who set their browser to 20px gets a readable interface from rem and an unchanged one from px.

Is rem relative to the parent?+

No, that is em. rem is relative to the root element, which is what makes it safe inside a component: nesting cannot compound it.

Should I change the root size?+

Almost never. Setting html to 62.5% to make 1rem equal 10px was a workaround for mental arithmetic, and it overrides a preference the reader set deliberately.

Related tools

Type scale generatorBuild a modular type scale from a base size and a ratio, see every step set in the real face, and copy it as Tailwind theme variables.Device viewport sizesThe viewport of every device you are asked to support, in the CSS pixels a media query actually reads, with the Tailwind breakpoint each one lands in.Icon searchSearch Lucide and Hugeicons by name, preview every match at the size you will ship it at, and copy the import and the JSX tag each set expects.

The tools are free. So is most of the library.

1935 blocks and 989 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.

Browse the blocks

No signup for the tools. MIT for free blocks, commercial licence for Pro.

Markdown version