This px to rem converter turns pixel values into rem units and back, using the root font size of your project. It is handy when a design file gives sizes in pixels but your CSS is written in rem.
How to use the px to rem converter
- Check the root font size. It is 16 by default, which is the usual browser default. Change it only if your project sets a different size on the
<html>element. - Type a px value to get rem, or type a rem value to get px. The conversion works both ways.
- Use the quick reference table for common sizes from 8px to 64px.
- Press a copy button to copy the result.
The formula
A rem is the font size of the root element. So the maths is one division or one multiplication:
rem = px ÷ root font size, for example 24 ÷ 16 =1.5rempx = rem × root font size, for example 0.875 × 16 =14px
| Pixels | rem (16px root) | Typical use |
|---|---|---|
| 8px | 0.5rem | Small gaps, icon spacing |
| 12px | 0.75rem | Captions, small labels |
| 14px | 0.875rem | Secondary text |
| 16px | 1rem | Body text |
| 20px | 1.25rem | Lead paragraph, small headings |
| 24px | 1.5rem | Card padding, h3 |
| 32px | 2rem | Section gaps, h2 |
| 48px | 3rem | Large headings |
| 64px | 4rem | Hero headings, page sections |
Why use rem instead of px?
Browsers let people choose a default text size in their settings. MDN notes that 16px is a common default, but user preferences can change it. Sizes in rem follow that setting: if someone sets their default to 20px, 1rem becomes 20px and your whole layout grows to match. A font-size written in px ignores that preference. Browser zoom still scales both units, but many people with low vision rely on the font-size setting.
Using rem for spacing as well keeps the proportions right. When the text gets bigger, the padding and gaps around it grow too, so the layout does not feel cramped.
/* No font-size on html: the user's own setting is the root */
h1 {
font-size: 2.5rem; /* 40px at a 16px root */
}
p {
font-size: 1rem; /* 16px */
margin-block-end: 1.5rem;
}
.card {
padding: 1.5rem; /* 24px */
border-radius: 0.5rem;
}Watch out: Avoid setting a fixed pixel size on the root, such as html { font-size: 10px; }. It overrides the user’s chosen text size for the whole site. If your project does change the root (for example with a percentage), enter the resulting pixel size in the root font size field so the numbers match.
rem or em?
em is relative to the font size of the element itself (or of its parent, when used on font-size). That means em values multiply when elements are nested: a list at 0.9em inside another list at 0.9em ends up at 0.81 of the original size. rem always looks back to the root, so it gives the same result anywhere on the page. Use rem for most sizes and keep em for things that should scale with their own text, such as the padding inside a button.
When px is still fine
Borders of 1px, thin dividers and small shadow offsets usually do not need to grow with the text, so px is a sensible choice there.
Learn more
- CSS Units
- CSS Units Explained: px vs rem vs em vs vw (and When to Use Each)
- CSS Text and Fonts
- CSS Responsive Design
- 12 Typography Rules for UI Design (with Examples)
- Fluid Typography (CSS clamp) Generator
Frequently asked questions
What is 1rem in pixels?
It equals the root font size. With browser default settings that is usually 16px, but it can be larger or smaller if the user has changed their text size.
Is a long decimal like 0.8125rem a problem?
No. Browsers handle decimals fine. 13px is 0.8125rem at a 16px root. If you see many awkward values, it may be a sign to tidy your type scale into fewer sizes.
Do rem values work in media queries?
Yes. Inside a media query, rem and em are based on the browser’s initial font size, not on a value you set on html. Breakpoints in em or rem also respond to the user’s text-size setting.
Should every value in my CSS be in rem?
Not every value. Use rem for font sizes, spacing and widths of text containers. Px is fine for hairline borders and small details that should stay the same size.