What px, rem and em mean in CSS
All three are lengths you can use anywhere CSS expects a size: font-size, padding, margin, width, gap and so on. They differ in what they are measured against.
- px is the CSS pixel, a fixed unit. The CSS Values specification defines it as 1/96 of an inch and ties it to a reference pixel, so on a high-resolution screen one CSS pixel can cover several physical dots. A size in px stays the same no matter what font size the reader prefers.
- rem stands for root em. The specification defines it as the em unit of the root element, the html tag. Every 1rem on the page is the same size, so it is easy to reason about.
- em equals the font size of the element it is used on. Inside the font-size property itself it refers to the parent, so nested em font sizes multiply.
The font-size property starts at the keyword medium, and browsers usually turn that into 16px. That is why 16 is the default root font size in this px to rem converter and why most px to rem tables you find assume it. If your CSS sets the html font size to something else, type that number into the root field.
The px to rem formula
Converting between pixels and rem is a single division or multiplication. The em formula is the same, only with the font size the em is based on.
With the 16px default, 24px ÷ 16 = 1.5rem, 14px ÷ 16 = 0.875rem and 1px ÷ 16 = 0.0625rem. With a 10px root, the same 24px is 2.4rem. Some values do not divide evenly: 15px at 16px is 0.9375rem, and 1.5px is 0.09375rem, which the converter rounds to the number of decimals you choose. Four decimals are more precise than any screen can show.
Why rem helps accessibility
The Web Content Accessibility Guidelines include success criterion 1.4.4 Resize Text at level AA: apart from captions and images of text, text must be resizable up to 200 percent without assistive technology and without losing content or functionality. The W3C explanation of the criterion lists several ways readers enlarge text, among them full-page zoom and changing only the text size, and it names percent, em units and named font sizes for text as sufficient techniques.
Page zoom enlarges everything, so it works with px too. The default font size in the browser settings is different: it changes the medium size that rem and em are built on, while a size in px stays where the designer put it. MDN puts it plainly: font sizes in px are not accessible, because in some browsers the user cannot change them. A reader with low vision who sets a larger default font size gets larger text on a site built with rem, and nothing on a site built with px.
A practical rule that follows from this:
- Use rem for font sizes, so text follows the reader's setting.
- Use rem for spacing and widths around text, so the layout grows with the text instead of clipping it.
- Use em for things that should scale with their own text, like the padding of a button or the size of an icon next to a label.
- Keep px for hairline borders, shadows and small details where a fraction of a pixel would look blurry or uneven.
Media queries are the exception
The Media Queries specification says relative units in a media query are based on the initial font size, set by the browser and the user, never on declarations in your style sheet. So html { font-size: 62.5% } changes what 1rem means in your rules, but not in your media queries, where it stays 16px by default. If you converted a 768px breakpoint with a 10px root, you would get 76.8rem, which the browser reads as 1228.8px. The bulk converter above keeps media queries in px by default. Turn that option off and it converts them with 16px instead of your root size, so your breakpoints keep their meaning.
px to rem in Tailwind CSS
Tailwind CSS v4 sets its spacing step to 0.25rem in the default theme, and a class like p-4 means four steps: calc(var(--spacing) * 4), which is 1rem or 16px at the default root. The table above shows the step for each size, so 24px is p-6, m-6 or gap-6, and 18px is p-4.5. Values that are not a multiple of 0.25 steps get an arbitrary value instead, like p-[0.0625rem]. Because the step is in rem, a different root font size changes the pixels, not the class name.
How to use the px to rem converter
- 1Check the root font size. Leave it at 16px unless your CSS sets a different font size on the html element.
- 2Type a value in px to get rem, or in rem to get px. For em, set the font size of the parent or of the element itself next to it.
- 3Copy a single value, or copy the whole conversion table as CSS custom properties or as a Tailwind cheat sheet.
- 4To convert a style sheet, paste it into the CSS box, choose whether to keep 1px borders and media queries in px, and copy the result.
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font size. With the browser default of 16px, 24px ÷ 16 = 1.5rem and 14px ÷ 16 = 0.875rem. To go back, multiply: 1.5rem × 16 = 24px. If your style sheet sets a different font size on the html element, use that number instead of 16.
How many pixels is 1rem?
1rem equals the font size of the root html element. When the page does not set one, that is the browser default, which is usually 16px. A visitor who raises the default font size in the browser settings gets a larger rem, which is the whole point of using it.
What is the difference between rem and em?
rem is always measured against the root html element, so 1.5rem is the same size everywhere on the page. em is measured against the font size of the element itself, and inside the font-size property against the parent. Nested em font sizes multiply: 1.2em inside 1.2em is 1.44 times the outer size. That makes em handy for padding that should grow with its own text, and rem the safer choice for font sizes and layout.
Should I use rem in media queries?
You can, but convert breakpoints with 16, not with your own root size. The Media Queries specification bases em and rem in a media query on the initial font size from the browser and the user, never on the font size your CSS sets on html. With the 62.5% trick, a 768px breakpoint is still 48rem, not 76.8rem. The bulk converter either leaves media queries in px or converts them with 16 for this reason.
Is the 62.5% root font size trick still a good idea?
Setting html { font-size: 62.5% } makes 1rem equal 10px at the default 16px, so 24px becomes an easy 2.4rem. It still respects the reader, because a larger browser default scales it too. The catch is that libraries size their own styles in rem too. Tailwind CSS, for example, sets its spacing step to 0.25rem, so with a 10px root p-4 is 10px instead of 16px. Keeping the 16px default and letting a converter do the math avoids that.
Should borders and shadows be in rem too?
Usually not. A 1px hairline border is a visual detail, not text, and in rem it can come out as a fraction of a pixel when the font size changes. That is why the bulk converter keeps 1px values by default. Use rem for font sizes, spacing and widths that hold text, and keep px for fine lines and small decorative details.