px, em and rem: Which CSS Unit Should You Actually Use?
px is fixed, em is relative to the element, and rem is relative to the page root. Here is what that really means and which one to reach for.
By Mubasher Hussain · Published 2026-09-12 · Updated 2026-09-01 · 923 words · about 4 minute read
Three CSS units come up constantly for sizing text and spacing: px, em and rem. They look interchangeable and often produce the same pixels on screen, but they behave very differently when a user changes their settings or when elements are nested. Getting the choice right is mostly about accessibility and predictability. You can convert between all three with the free PX to REM Converter.
What each unit is relative to
A pixel, px, is an absolute unit. 24px is 24px no matter what else is going on. That makes it predictable but rigid. An em is relative to the font size of the current element, so if that element's font size is 20px, then 1em is 20px and 1.5em is 30px. A rem, root em, is relative to the font size of the root html element, which every browser sets to 16px by default. So 1rem is 16px unless someone changes the root, and 1.5rem is 24px. The difference between em and rem is simply what they measure against: the element itself, or the page root.
| Unit | Relative to | 1.5 of it at 16px root |
|---|---|---|
| px | Nothing, absolute | n/a, px is fixed |
| em | Current element font size | Depends on the element |
| rem | Root (html) font size | 24px |
Why rem matters for accessibility
Here is the reason this is not just trivia. Many people increase their browser's default font size because they find 16px too small to read comfortably. When you size text and spacing in rem, everything scales with that preference automatically, so a reader who bumps their default to 20px gets a layout that grows to match. When you hard-code sizes in px, they ignore the reader's choice entirely and stay stubbornly small, which is exactly the wrong outcome for the people who most need larger text.
This is why the common modern guidance is to size fonts, and often spacing, in rem rather than px. It costs you nothing in normal use, because 1rem is still 16px by default, but it quietly respects the reader's settings. The one place px is still fine is for things that genuinely should not scale, like a one-pixel border or a hairline divider.
Type a pixel value and get rem and em at any root size, or convert rem back to px. Includes a reference table of common values, all in your browser.
When em is the right choice
em is not worse than rem, it is for a different job. Because em tracks the current element's font size, it is perfect when you want something to scale with its own text rather than the page root. Padding inside a button is the classic example: if you set the padding in em, then making the button's text larger automatically makes its padding grow in proportion, so the button stays balanced. The same idea applies to spacing around a heading that should breathe more when the heading itself is bigger.
em compounds through nesting. If a list has font-size 0.9em and it sits inside another element at 0.9em, the text shrinks twice, and a third level shrinks again. This cascade is the main reason people prefer rem for global sizing, because rem always measures from the root and never compounds.
So a practical split is: use rem for global, predictable sizing like base font size, headings and layout spacing, and use em for local sizing that should track a specific element, like the internal padding of a component. That gives you predictability where you want it and proportional scaling where it helps.
Doing the math
The conversion is simple arithmetic. To turn px into rem, divide by the root font size: at a 16px root, 24px is 24 divided by 16, which is 1.5rem. To go the other way, multiply: 2rem at a 16px root is 32px. Some teams set the root to a round number to make this easier, for example changing the root to 10px so that 1rem is 10px and every value is just the pixel count divided by ten. It is a neat trick, but be careful, because forcing the root smaller can shrink text for users who rely on the 16px default, so if you do it, size your text back up in rem.
Rather than doing this in your head each time, a converter lets you set your actual root size and read off the rem and em instantly, and it can show a table of the values you use most so you are not recalculating 12px, 14px and 16px over and over.
Common questions
Should I use px or rem for font sizes? Prefer rem, so text respects the reader's browser settings. What is 1rem in pixels? 16px by default, unless the root html font size has been changed. When is em better than rem? When you want a value, like button padding, to scale with its own element's text rather than the page root. Is the converter private? Yes, it is pure arithmetic in your browser.
px is fixed, em follows the element, and rem follows the page root: choose rem for accessible, predictable sizing and em where proportional scaling helps. Work out any value with the PX to REM Converter, and check your text stays legible with the Contrast Checker.