PX to REM & EM Converter
Convert px to rem and em using your own root font size, with a separate parent size so em only matches rem when the parent is the root.
rem is measured against the base (root) size, em against the parent element’s size.
16px1rem1em100%
| px | rem | em |
|---|---|---|
| 1 | 0.0625 | 0.0625 |
| 2 | 0.125 | 0.125 |
| 4 | 0.25 | 0.25 |
| 6 | 0.375 | 0.375 |
| 8 | 0.5 | 0.5 |
| 10 | 0.625 | 0.625 |
| 12 | 0.75 | 0.75 |
| 14 | 0.875 | 0.875 |
| 16 | 1 | 1 |
| 18 | 1.125 | 1.125 |
| 20 | 1.25 | 1.25 |
| 24 | 1.5 | 1.5 |
| 28 | 1.75 | 1.75 |
| 32 | 2 | 2 |
| 36 | 2.25 | 2.25 |
| 40 | 2.5 | 2.5 |
| 48 | 3 | 3 |
| 56 | 3.5 | 3.5 |
| 64 | 4 | 4 |
| 72 | 4.5 | 4.5 |
| 80 | 5 | 5 |
| 96 | 6 | 6 |
| 128 | 8 | 8 |
What this px to rem converter does
Enter a value in pixels or in rem, set your base (root) font size, and this tool shows the equivalent px, rem, em and % values instantly. The inputs are linked every way: type a pixel value to see its rem, a rem value to see its pixels, or an em value to see both. The base font size defaults to 16px, the browser default, but you can change it to match your own root styles. Copy any equivalent with a single click and paste it straight into your CSS. Tick “Show Tailwind CSS classes” and the answer gains the Tailwind spacing class for the same length — a step on the default scale such as p-6, or an arbitrary value such as p-[1.3rem] off it — and the text-size class, each with its own copy button.
How the conversion works
The math is simple and lossless: rem = px / base and px = rem × base. With the standard 16px base, 24px equals 1.5rem and 1rem equals 16px. The em figure is measured against the separate parent font size you enter, so it matches the rem figure only when the parent is the root: 24px is 1.5rem on a 16px base, but 1.2em inside a 20px parent. Results are rounded to the places you pick in Decimal places in the answer — the default keeps long fractions readable without losing practical accuracy for layout work, and All digits prints every digit the calculation holds.
Frequently asked questions
What base font size should I use?
Most browsers use 16px as the default root font size, so 16 is the safe starting point and the tool's default. If your CSS sets a different root size (for example html { font-size: 62.5% } which makes 1rem = 10px), enter that pixel value as the base so the conversions match your project.
What is the difference between rem and em here?
rem is always relative to the root font size, while em is relative to the font size of the element's parent. This tool has a field for each — the base (root) size and the parent size — so the two figures differ whenever the parent is not the root: 24px is 1.5rem on a 16px base and 1.2em inside a 20px parent. Set the parent to the base and they match again.
Is there a table of common sizes, and can I type em?
Yes. A lookup table lists the common pixel sizes with their rem at the current base and em at the current parent size, and em has a box of its own, so you can start from it.
Can I see the size, get a percentage, or change the rounding?
Yes. Under the answer a line of sample text is drawn at the converted size in pixels, so you can judge it by eye; a size too large to draw gets a note instead. The answer also has a percentage row — px over the parent size, the font-size percentage that matches em — with its own copy button. Decimal places in the answer sets how far the answer and the common-sizes table are rounded, or pick All digits; the input boxes keep their own rounding.
Can it give me the Tailwind class for a size?
Yes. Tick “Show Tailwind CSS classes” and two rows join the answer, each with its own copy button: the spacing class, read on Tailwind v4's default scale — a step such as p-6 where the length is on it, an arbitrary value such as p-[1.3rem] where it is not, and -m- for a negative length — and the text-size class, a named one such as text-2xl when the size matches exactly, otherwise text-[…rem]. The p- stands for any spacing utility (m-, gap-, w-…). The classes are worked in rem, so they follow the base size you set, and the option travels in the link.