px to rem Converter & Calculator
Other Coding Tools
px to rem Converter Calculator
Convert pixels to rem and rem to pixels instantly with a customizable base font size. This tool runs entirely in your browser with no data sent to any server. Set your root font size, type a value in either field, and get the converted result immediately.
What is the difference between px and rem?
Pixels (px) are an absolute unit that represents a fixed size on screen. The rem unit stands for "root em" and is relative to the font size of the root <html> element. By default, browsers set the root font size to 16px, so 1rem = 16px. Using rem instead of px makes your CSS scalable and accessible, because sizing adapts when users change their browser's default font size.
How do I convert px to rem?
Divide the pixel value by the root font size. For example, with the default 16px base: 24px / 16 = 1.5rem. This tool performs that calculation automatically - enter any pixel value and get the rem equivalent instantly, with a one-click copy button for the result.
How do I convert rem to px?
Multiply the rem value by the root font size. With a 16px base: 2rem × 16 = 32px. The converter handles this in real time as you type, so you can quickly check rem values found in stylesheets or design specs against their pixel equivalents.
Why should I use rem instead of px in CSS?
Using rem creates a relative sizing system that respects the user's browser font size preferences. When a user increases their default font size for readability, all rem-based sizes scale proportionally, while px-based sizes stay fixed. This makes rem the preferred unit for accessible, responsive web design in modern CSS frameworks like Tailwind CSS.
What is the default root font size?
All major browsers default to a 16px root font size. This means 1rem = 16px out of the box. However, many CSS frameworks and resets change this value. For example, Tailwind CSS sets the base to 16px, while some projects use html { font-size: 62.5%; } to make 1rem = 10px for simpler math. This converter lets you adjust the base to match your project.
How does the 62.5% root font size trick work?
Setting html { font-size: 62.5%; } reduces the root font size from 16px to 10px (62.5% of 16). This makes mental math easier: 1rem = 10px, so 1.4rem = 14px, 2.4rem = 24px, and so on. You still need to reset body { font-size: 1.6rem; } (which equals 16px) to keep body text readable. Change the base size in this tool to 10 to preview conversions with this setup.
Is there a difference between rem and em?
Both are relative units, but they reference different bases. The rem unit is always relative to the root <html> font size, while em is relative to the current element's font size. This makes rem predictable and easy to reason about across nested components, whereas em compounds in nested elements (the "em compounding problem"). For most sizing in modern CSS, rem is preferred.
How do I convert Tailwind CSS spacing values to rem?
Tailwind CSS uses a base of 4px per spacing unit with rem output. For example, p-4 applies 1rem (16px) of padding, p-8 applies 2rem (32px), and text-lg applies 1.125rem (18px). Use this converter to quickly map between Tailwind's rem values and the pixel sizes you see in your design files.