Pixels to Rem

How to Convert Pixels to Rem?

To convert pixels to rem, divide the pixel value by the root element's font size (16px by default). One rem equals the font size of the html element. With the standard 16px root, 1rem = 16px, 0.875rem = 14px, and 1.25rem = 20px. Rem units are the modern best practice for accessible, responsive web design. Unlike em, rem does not compound — 1.5rem always equals 24px (at a 16px root) regardless of how deeply nested the element is. This predictability makes rem the preferred unit for font sizes, spacing, and layout dimensions in CSS. Converting pixel-based designs to rem is one of the most common tasks in front-end development, and every web developer should be fluent in this conversion. It is also central to design tokens and component libraries, where teams want one root setting to scale an entire interface consistently. A solid px-to-rem workflow makes it easier to support accessibility preferences, keep spacing systems coherent, and avoid brittle magic numbers spread across a stylesheet. That same consistency is why teams often define their spacing and type scales in rem from the start.

How to Convert Pixel to Rem

1. Check the root font size (default is 16px in all major browsers).
2. Divide the pixel value by the root font size to get rem.
3. The formula is: rem = px / root-font-size.
4. Common conversions at 16px base: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 20px = 1.25rem, 24px = 1.5rem.
5. If your root is set to something other than 16px (e.g., 10px via the 62.5% trick), use that value as the divisor.

Real-World Examples

History of Pixel and Rem

The rem unit was introduced in the CSS3 specification to address the compounding problem of em units. Before rem, developers had to carefully track the font-size cascade to calculate em values correctly — a 1.2em paragraph inside a 1.5em section inside a 1.2em article resulted in a font size of 1.2 x 1.5 x 1.2 = 2.16 times the root. Rem bypasses this entirely by always referencing the root. Browser support for rem became universal around 2012-2013, and it quickly became the standard unit for modern CSS frameworks. Tailwind CSS, Bootstrap (v4+), and most design systems now use rem as their primary sizing unit.

Common Mistakes to Avoid

• Using rem where px is more appropriate. Borders, box-shadows, and decorative elements that should remain a fixed size regardless of font size are better specified in px. Not everything should scale.
• Forgetting that rem is root-relative, not parent-relative. If a parent element has font-size: 20px, rem still references the root (16px), not the parent. This is the key difference from em.
• Not accounting for the 62.5% trick. Some projects set html { font-size: 62.5%; } to make 1rem = 10px. In these projects, 16px = 1.6rem, not 1rem. Always check the project root font size before converting.
• Assuming rem stays visually fixed when users raise their browser default font size. Rem is supposed to scale with that preference. If a layout breaks, the issue is usually the layout, not the rem unit.

Frequently Asked Questions