To turn pixels into rem, divide the pixel value by the root font size. With the browser default of 16px, 24px is 1.5rem and 12px is 0.75rem. Type a value in either box to convert both ways, change the root size if your site uses another base, or paste whole CSS rules.
| Pixels | rem | Typical use |
|---|---|---|
| 12px | 0.75rem | Captions, small labels |
| 14px | 0.875rem | Secondary text, buttons |
| 16px | 1rem | Body text |
| 20px | 1.25rem | Large body text, small headings |
| 24px | 1.5rem | Section headings, card padding |
| 32px | 2rem | Page headings, section gaps |
| 48px | 3rem | Hero headings |
Updated
A two-way converter with a custom root size, a full table from 1 to 128 pixels with the matching Tailwind class, a converter for whole CSS blocks and a helper that writes fluid clamp() sizes.
| Pixels | rem | Tailwind spacing | Tailwind text |
|---|---|---|---|
| 1px | 0.0625rem | p-px | |
| 2px | 0.125rem | p-0.5 | |
| 3px | 0.1875rem | p-[0.1875rem] | |
| 4px | 0.25rem | p-1 | |
| 5px | 0.3125rem | p-[0.3125rem] | |
| 6px | 0.375rem | p-1.5 | |
| 7px | 0.4375rem | p-[0.4375rem] | |
| 8px | 0.5rem | p-2 | |
| 9px | 0.5625rem | p-[0.5625rem] | |
| 10px | 0.625rem | p-2.5 | |
| 11px | 0.6875rem | p-[0.6875rem] | |
| 12px | 0.75rem | p-3 | text-xs |
| 13px | 0.8125rem | p-[0.8125rem] | |
| 14px | 0.875rem | p-3.5 | text-sm |
| 15px | 0.9375rem | p-[0.9375rem] | |
| 16px | 1rem | p-4 | text-base |
| 17px | 1.0625rem | p-[1.0625rem] | |
| 18px | 1.125rem | p-[1.125rem] | text-lg |
| 19px | 1.1875rem | p-[1.1875rem] | |
| 20px | 1.25rem | p-5 | text-xl |
| 21px | 1.3125rem | p-[1.3125rem] | |
| 22px | 1.375rem | p-[1.375rem] | |
| 23px | 1.4375rem | p-[1.4375rem] | |
| 24px | 1.5rem | p-6 | text-2xl |
| 25px | 1.5625rem | p-[1.5625rem] | |
| 26px | 1.625rem | p-[1.625rem] | |
| 27px | 1.6875rem | p-[1.6875rem] | |
| 28px | 1.75rem | p-7 | |
| 29px | 1.8125rem | p-[1.8125rem] | |
| 30px | 1.875rem | p-[1.875rem] | text-3xl |
| 31px | 1.9375rem | p-[1.9375rem] | |
| 32px | 2rem | p-8 | |
| 33px | 2.0625rem | p-[2.0625rem] | |
| 34px | 2.125rem | p-[2.125rem] | |
| 35px | 2.1875rem | p-[2.1875rem] | |
| 36px | 2.25rem | p-9 | text-4xl |
| 37px | 2.3125rem | p-[2.3125rem] | |
| 38px | 2.375rem | p-[2.375rem] | |
| 39px | 2.4375rem | p-[2.4375rem] | |
| 40px | 2.5rem | p-10 | |
| 41px | 2.5625rem | p-[2.5625rem] | |
| 42px | 2.625rem | p-[2.625rem] | |
| 43px | 2.6875rem | p-[2.6875rem] | |
| 44px | 2.75rem | p-11 | |
| 45px | 2.8125rem | p-[2.8125rem] | |
| 46px | 2.875rem | p-[2.875rem] | |
| 47px | 2.9375rem | p-[2.9375rem] | |
| 48px | 3rem | p-12 | text-5xl |
| 49px | 3.0625rem | p-[3.0625rem] | |
| 50px | 3.125rem | p-[3.125rem] | |
| 51px | 3.1875rem | p-[3.1875rem] | |
| 52px | 3.25rem | p-[3.25rem] | |
| 53px | 3.3125rem | p-[3.3125rem] | |
| 54px | 3.375rem | p-[3.375rem] | |
| 55px | 3.4375rem | p-[3.4375rem] | |
| 56px | 3.5rem | p-14 | |
| 57px | 3.5625rem | p-[3.5625rem] | |
| 58px | 3.625rem | p-[3.625rem] | |
| 59px | 3.6875rem | p-[3.6875rem] | |
| 60px | 3.75rem | p-[3.75rem] | text-6xl |
| 61px | 3.8125rem | p-[3.8125rem] | |
| 62px | 3.875rem | p-[3.875rem] | |
| 63px | 3.9375rem | p-[3.9375rem] | |
| 64px | 4rem | p-16 | |
| 65px | 4.0625rem | p-[4.0625rem] | |
| 66px | 4.125rem | p-[4.125rem] | |
| 67px | 4.1875rem | p-[4.1875rem] | |
| 68px | 4.25rem | p-[4.25rem] | |
| 69px | 4.3125rem | p-[4.3125rem] | |
| 70px | 4.375rem | p-[4.375rem] | |
| 71px | 4.4375rem | p-[4.4375rem] | |
| 72px | 4.5rem | p-[4.5rem] | text-7xl |
| 73px | 4.5625rem | p-[4.5625rem] | |
| 74px | 4.625rem | p-[4.625rem] | |
| 75px | 4.6875rem | p-[4.6875rem] | |
| 76px | 4.75rem | p-[4.75rem] | |
| 77px | 4.8125rem | p-[4.8125rem] | |
| 78px | 4.875rem | p-[4.875rem] | |
| 79px | 4.9375rem | p-[4.9375rem] | |
| 80px | 5rem | p-20 | |
| 81px | 5.0625rem | p-[5.0625rem] | |
| 82px | 5.125rem | p-[5.125rem] | |
| 83px | 5.1875rem | p-[5.1875rem] | |
| 84px | 5.25rem | p-[5.25rem] | |
| 85px | 5.3125rem | p-[5.3125rem] | |
| 86px | 5.375rem | p-[5.375rem] | |
| 87px | 5.4375rem | p-[5.4375rem] | |
| 88px | 5.5rem | p-[5.5rem] | |
| 89px | 5.5625rem | p-[5.5625rem] | |
| 90px | 5.625rem | p-[5.625rem] | |
| 91px | 5.6875rem | p-[5.6875rem] | |
| 92px | 5.75rem | p-[5.75rem] | |
| 93px | 5.8125rem | p-[5.8125rem] | |
| 94px | 5.875rem | p-[5.875rem] | |
| 95px | 5.9375rem | p-[5.9375rem] | |
| 96px | 6rem | p-24 | text-8xl |
| 97px | 6.0625rem | p-[6.0625rem] | |
| 98px | 6.125rem | p-[6.125rem] | |
| 99px | 6.1875rem | p-[6.1875rem] | |
| 100px | 6.25rem | p-[6.25rem] | |
| 101px | 6.3125rem | p-[6.3125rem] | |
| 102px | 6.375rem | p-[6.375rem] | |
| 103px | 6.4375rem | p-[6.4375rem] | |
| 104px | 6.5rem | p-[6.5rem] | |
| 105px | 6.5625rem | p-[6.5625rem] | |
| 106px | 6.625rem | p-[6.625rem] | |
| 107px | 6.6875rem | p-[6.6875rem] | |
| 108px | 6.75rem | p-[6.75rem] | |
| 109px | 6.8125rem | p-[6.8125rem] | |
| 110px | 6.875rem | p-[6.875rem] | |
| 111px | 6.9375rem | p-[6.9375rem] | |
| 112px | 7rem | p-28 | |
| 113px | 7.0625rem | p-[7.0625rem] | |
| 114px | 7.125rem | p-[7.125rem] | |
| 115px | 7.1875rem | p-[7.1875rem] | |
| 116px | 7.25rem | p-[7.25rem] | |
| 117px | 7.3125rem | p-[7.3125rem] | |
| 118px | 7.375rem | p-[7.375rem] | |
| 119px | 7.4375rem | p-[7.4375rem] | |
| 120px | 7.5rem | p-[7.5rem] | |
| 121px | 7.5625rem | p-[7.5625rem] | |
| 122px | 7.625rem | p-[7.625rem] | |
| 123px | 7.6875rem | p-[7.6875rem] | |
| 124px | 7.75rem | p-[7.75rem] | |
| 125px | 7.8125rem | p-[7.8125rem] | |
| 126px | 7.875rem | p-[7.875rem] | |
| 127px | 7.9375rem | p-[7.9375rem] | |
| 128px | 8rem | p-32 | text-9xl |
Pixels in CSS are fixed units. A heading set to 32px stays 32px even when a visitor has told their browser to use larger text. The rem unit solves that by tying sizes to the root font size, which follows the visitor's setting by default. Change one number and every rem-based size on the page scales with it.
That makes rem a good fit for type, padding, margins and widths of text columns. Pixels still make sense for things that should not scale with text, such as a 1px divider or the size of an image whose pixel dimensions are fixed.
The live example on this page sets the same 1.25 size three levels deep, once in em and once in rem. The em version grows at each level because each child multiplies its parent's size. The rem version stays the same at every depth because it always looks back at the root.
em is still useful when something should scale with its own text, such as the padding inside a button or the gap after an icon. Set the button's font size in rem and its padding in em, and changing the font size resizes the whole button.
clamp(min, preferred, max) picks the preferred value but never goes below the minimum or above the maximum. Using a mix of rem and vw for the preferred value makes a heading grow smoothly with the window width while still respecting the user's font size.
The helper works out the line between two points, for example 32px at a 375px wide phone and 56px at a 1280px desktop, and writes it as a rem plus vw expression. Test the result at a few widths, because very large vw slopes can make text grow faster than its line length.
1rem equals the font size of the root html element. Browsers default that to 16px, so 1rem is 16px unless the site or the visitor changes it. If a visitor sets their default text size to 20px, 1rem becomes 20px on any site that has not fixed the root size in pixels.
rem is always relative to the root html font size. em is relative to the font size of the element itself (or of its parent, when used on font-size). Nested em sizes multiply: a 1.2em list inside a 1.2em list ends up 1.44 times the base. rem never compounds, which is why most design systems use it.
Use rem. Text set in px ignores the browser's default font size setting, which some people raise to read comfortably. Page zoom still works with px, but the font size preference does not, so rem is the more accessible choice.
In Tailwind's default spacing scale, each step is 0.25rem, which is 4px at a 16px root. So p-4 is 1rem (16px) and gap-6 is 1.5rem (24px). Font sizes use names instead: text-sm is 0.875rem and text-base is 1rem. The table on this page lists the class for every size that is on the default scale.
No. Every conversion runs in your browser and nothing you type or paste is uploaded.
Related: Screen resolution and breakpoint checker, CSS grid generator, Font pairing tool, Color converter, All free tools.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.