What This Tool Does
This tool converts between px and rem CSS values, the two most common length units in web development. Type into either field to see the other update instantly, based on the root font size you choose, with a live formula card and reference tables for common sizes and the Tailwind text and spacing scales.
How to Convert px to rem
Type a pixel value into the Pixels field to see its rem equivalent, or type a rem value into the Root em field to see pixels. Choose a root font size preset, or enter a custom one, rem is always relative to that size. Click any row in the reference table on the right to load that value directly.
Why rem Instead of px
A pixel value is fixed regardless of the user's settings, but a rem value scales with the root font size, which respects a user's browser zoom or accessibility font-size preference. Using rem for font sizes and spacing means someone who increases their browser's default text size gets a proportionally larger layout instead of text that stays a fixed, potentially too-small size.
The 62.5% Trick
Setting html { font-size: 62.5% } changes the root size from the browser default of 16px to 10px, without changing anything visually for users who have not customized their browser font size. With a 10px root, 1rem equals 10px, making the mental math simple, 16px becomes 1.6rem, 24px becomes 2.4rem, instead of the less intuitive divisions that come from a 16px root.
Common Uses for a px to rem Converter
Converting a design handoff spec given in pixels into rem values for a CSS file, working out the rem equivalent of a Tailwind spacing or text class at a non-default root size, and checking what a custom root font size does to your existing pixel-based measurements are all common uses for this tool. It works as a rem to px converter just as easily as px to rem, a css px rem calculator and tailwind px to rem reference, a root font size calculator, a rem calculator online, a px rem conversion tool, a tailwind spacing scale rem reference, a guide to accessibility rem vs px tradeoffs, and a general css unit converter px rem tool.