px → rem Converter
Convert pixels to rem, see the result live on real HTML elements, batch-convert CSS snippets, and browse a full reference table.
Page Heading
Section Heading
Subsection Heading
The quick brown fox jumps over the lazy dog.
Helper text, label, or caption
First line of text
Second line of text
border-radius
Common px values converted to rem, em, and % — updates instantly when you change the base font size above.
| px | rem | em | % | pt |
|---|
Paste any CSS snippet — all px values are converted to
rem instantly using your current base font size.
CSS Units Deep Dive: px, rem, em, Percent, and pt
When building responsive, accessible websites, choosing the right CSS unit is critical. Each unit serves a different purpose, and understanding the differences between them will save you hours of debugging and make your layouts more robust.
Absolute Units vs. Relative Units
Absolute units (px, pt, cm, in) are fixed. They do not scale with user preferences or parent elements. 16px is always 16 pixels on screen.
Relative units (rem, em, %, vw, vh) scale relative to something else — the root font size, the parent element, or the viewport. They are the foundation of responsive design and accessibility.
px (Pixels) — The Absolute Reference
A pixel (px) on the web is a CSS reference pixel, roughly 1/96th of an inch on most devices. High-DPI screens (Retina) use multiple physical pixels to represent one CSS pixel.
When to use px
border: 1px solid— borders should stay thin and not scale with textbox-shadow— shadow blur and spread values- Media query breakpoints (
@media (min-width: 768px)) - Icon sizes that intentionally don't scale with text
When to avoid px
- Font sizes — overrides user browser settings, accessibility issue
- Padding and margin — breaks proportional scaling
- Container widths — fixed widths break on small screens
- Any layout that should scale when users increase their default font size
rem (Root EM) — The Accessibility Hero
rem is relative to the root element's font size (<html>). By default, browsers set this to 16px, so 1rem = 16px. Users can change their browser's default font size, and rem-based layouts scale proportionally — improving accessibility for users with low vision.
Accessibility impact: Approximately 2–3% of users (including many older adults) increase their default font size. That is millions of people. Using rem is a small change with a large impact.
The 62.5% Trick
To make mental arithmetic easier, many developers set:
html {
font-size: 62.5%; /* 62.5% of 16px = 10px → 1rem = 10px */
}
body {
font-size: 1.6rem; /* restore body to 16px */
}
h1 { font-size: 3.2rem; } /* = 32px */
h2 { font-size: 2.4rem; } /* = 24px */
p { font-size: 1.6rem; } /* = 16px */
Now 24px becomes 2.4rem instead of 1.5rem — much easier to calculate mentally.
Best practices for rem
- Font sizes (h1, h2, p, button, input)
- Padding and margin (spacing rhythm)
- Width and max-width (containers, cards)
- Border-radius (rounded corners scale with typography)
em — Relative to Parent
em is relative to the nearest parent element's font size. This creates compounding — a nested element with font-size: 1.2em inside a parent with font-size: 1.2em renders at 1.44em (1.2 × 1.2) relative to the root.
/* em compounding example */
.parent { font-size: 1.2em; } /* 1.2 × root */
.child { font-size: 1.2em; } /* 1.2 × 1.2 = 1.44em relative to root */
When to use em: Padding inside buttons (scales with the button's font size), margin that should scale with nearby text. When to avoid em: Global font sizes, deeply nested layouts — use rem instead for predictable scaling.
Percent (%) — Relative to Parent
Percent is the simplest relative unit: 50% means half of the parent element's value. Best for widths in fluid layouts (width: 100%; max-width: 1200px;), background positions, transforms, and scaling images relative to their container.
pt (Points) — The Print Unit
A point (pt) equals 1/72 of an inch — an absolute unit from the print world. Browsers render 1pt as 1.333px. Only use pt for: Print stylesheets (@media print). For screen, always use px or rem.
Building a Responsive Spacing System with rem
A well-designed spacing system uses a scale, not arbitrary values. Define CSS custom properties in rem and use them everywhere:
:root {
--space-xs: 0.25rem; /* 4px at 16px base */
--space-sm: 0.5rem; /* 8px */
--space-md: 1rem; /* 16px */
--space-lg: 2rem; /* 32px */
--space-xl: 4rem; /* 64px */
--space-xxl: 8rem; /* 128px */
}
.card {
padding: var(--space-lg);
margin-bottom: var(--space-xl);
gap: var(--space-md);
}
With this system, you can adjust global spacing by changing the root font size alone. The entire layout scales proportionally.
Media Queries: px or rem?
There is an ongoing debate, but for most projects the recommendation is clear:
- Use px for breakpoints — most consistent across browsers, easier to predict and debug, industry standard
- rem/em in media queries — scales if users change default font size, but can cause unexpected layout changes
Recommendation: Use px for min-width breakpoints (e.g., @media (min-width: 768px)). They control layout, not text sizing. For most projects, px in media queries is safe and practical.
Converting Existing px-Based Codebases to rem
Migrating a large CSS codebase from px to rem can be done incrementally:
- Set the root font size — Add
html { font-size: 100%; }(default 16px) - Convert body font size —
body { font-size: 1rem; } - Convert typography first — headings, paragraphs, buttons
- Convert spacing — padding, margin, gap
- Leave borders, shadows, and breakpoints as px
Pro tip: Use the Batch CSS Converter above. Paste your entire CSS and copy back the rem version instantly.
Common Pitfalls and How to Avoid Them
Pitfall 1: Using rem for everything
Not every property should use rem. Borders (border: 1px solid) and shadows should stay in px — they are purely visual and don't need to scale with text.
Pitfall 2: Mixing units unpredictably
/* Bad — why is padding in px? */
.card {
font-size: 1rem;
padding: 16px; /* should be 1rem if it relates to font size */
}
/* Good — consistent scaling */
.card {
font-size: 1rem;
padding: 1rem;
}
Pitfall 3: Forgetting the body font reset with 62.5%
If you set html { font-size: 62.5%; } and forget to set body { font-size: 1.6rem; }, every text element defaults to 10px — too small to read.
Pitfall 4: Assuming 1rem is always 16px
Users can change their browser's default font size. On some devices the default may be 14px or 18px. Your design should tolerate this without breaking.
Pro Tips for CSS Unit Mastery
- Start projects with a spacing scale — Define
--space-*variables in rem. Your layouts will be consistent and easy to adjust globally. - Use rem for typography, px for borders — This is the golden rule. Borders should not scale with text.
- Set
body { font-size: 1rem; }— Makes body text respect the root font size from a known baseline. - Never set
htmlfont size to a fixed px value — Use percentages (100%, 62.5%) or the browser default. Fixed px breaks the user's ability to change their default font size. - Test with browser zoom AND font size — Ctrl/Cmd + scales the entire page (including px). Changing the default font size only scales rem/em. Test both scenarios.
- Use this converter as a learning tool — Experiment with different root font sizes and see the live element previews change. It's the fastest way to internalize how rem works.
- Document your unit strategy — In your team's design system, specify: "Font sizes and spacing use rem. Borders use px. Media queries use px." Consistency prevents mix-up bugs.
Summary: When to Use Which Unit
| Property Category | Recommended Unit | Reason |
|---|---|---|
| Font sizes | rem | Accessibility, scales with user preferences |
| Padding & margin | rem | Proportional spacing with text |
| Width, max-width | rem or % | Responsive, scales with root |
| Gap (flex/grid) | rem | Consistent rhythm with spacing scale |
| Border radius | rem | Scales with card/text size |
| Border width | px | Visual detail, not layout-critical |
| Box shadow | px | Visual only |
| Media queries | px | Layout breakpoints are design decisions |
| Print styles | pt or cm | Print-optimized units |
No single unit solves every problem. The best CSS uses a mix of units, choosing the right tool for each job. This converter helps you apply that mix correctly and see the results instantly.
Frequently Asked Questions
What is the default root font size in all browsers?
All major browsers default to 16px as the root font size (<html>). So 1rem = 16px unless you or the user changes it. You can verify this in DevTools by inspecting the computed style of the html element.
How do I calculate rem from px?
Divide the pixel value by the root font size. With the default 16px root: 24px ÷ 16 = 1.5rem. With the 62.5% trick (1rem = 10px): 24px ÷ 10 = 2.4rem. Or just use the converter above — type any value and get the result instantly.
Should I use rem or em for font sizes?
Use rem for most font sizes — it avoids compounding and respects user browser settings. Use em only when you intentionally want a font size to be relative to its parent (e.g., a modal heading that should scale inside a modal that already has a scaled font size).
Can I use rem for media queries?
Yes, but be careful. @media (min-width: 48rem) with a root of 16px equals 768px. If the user increases their default font size, the breakpoint shifts. This can be an accessibility feature or an unexpected layout change. Test thoroughly. For most teams, px in media queries is simpler and safer.
How do I convert an entire stylesheet from px to rem?
Use the Batch CSS Converter tab in this tool. Paste your entire CSS into the left textarea, and the right side shows all px values converted to rem based on your current root font size setting. Copy the result back to your stylesheet. For large codebases, migrate incrementally — start with typography, then spacing.
What is the 62.5% trick and why is it popular?
The 62.5% trick sets html { font-size: 62.5%; }, making 1rem = 10px. This makes mental arithmetic trivial: 16px = 1.6rem, 24px = 2.4rem. It is widely used in design systems. Both this approach and the default 16px base scale identically when users change their browser font size.
Does rem work in all browsers?
Yes. rem units are supported in all modern browsers including IE9 and later. IE8 and below are now obsolete. For any project targeting a modern audience, rem is completely safe to use without fallbacks.
Why does my rem value have many decimal places?
Because px values may not divide evenly by your root font size. For example, 13px ÷ 16 = 0.8125rem. This is perfectly fine — browsers handle sub-pixel rendering gracefully, and the slight rounding is invisible to users.
Can I use rem with CSS variables (custom properties)?
Yes, and it is a powerful combination. For example: --spacing-lg: 2rem;. The variable stores the relative unit, so it automatically respects user font size preferences. This is the recommended approach for design systems and spacing scales.
What is the difference between rem and the 62.5% trick in practice?
Without the trick: 1rem = 16px. You write 1.5rem for 24px. With the trick: 1rem = 10px. You write 2.4rem for 24px. Both scale identically when users change their browser font size. Choose whichever is more intuitive for your team.
How do I test if my site is accessible with rem?
Open your browser settings and increase the default font size (Chrome: Settings → Appearance → Font size → Large or Very Large). Then visit your site. Everything sized in rem should scale up proportionally. px-based text will not change. This is a quick and effective accessibility audit.
Never set html font size to a fixed px — why?
If you set html { font-size: 16px; }, you break the user's ability to change their browser's default font size. The browser preference is overridden by your CSS. Use percentages (100%, 62.5%) or leave the root at its browser default so user preferences take effect.
Related Developer & Utility Tools
More free tools to speed up your workflow — all run locally in your browser.