PX to REM Converter - Free, Instant, Bidirectional | BotGauge
Enter any pixel value and get the exact rem equivalent, instantly. Supports custom root font size, batch conversion for multiple values at once, and bidirectional conversion.
Conversions use 16px as the root font size, which is the browser default. If your CSS sets a different value on <html>, update the base field above and the results will adjust automatically.
Live Preview
Font Size = 0rem | Base Font Size = 16px
The sample text renders at the converted rem size in real time, so you can see exactly how it will look on the page.
PX to REM Conversion Table
Three tabs: Font sizes, Spacing & padding, and Breakpoints. All values use 16px as the base, shown to 4 decimal places.
Font sizes
| PX | REM |
|---|---|
| 10px | 0.625rem |
| 11px | 0.6875rem |
| 12px | 0.75rem |
| 13px | 0.8125rem |
| 14px | 0.875rem |
| 15px | 0.9375rem |
| 16px | 1rem |
| 17px | 1.0625rem |
| 18px | 1.125rem |
| 19px | 1.1875rem |
| 20px | 1.25rem |
| 21px | 1.3125rem |
| 22px | 1.375rem |
| 24px | 1.5rem |
| 26px | 1.625rem |
| 28px | 1.75rem |
| 30px | 1.875rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 60px | 3.75rem |
| 64px | 4rem |
| 72px | 4.5rem |
| 80px | 5rem |
| 96px | 6rem |
Spacing & padding
| PX | REM |
|---|---|
| 4px | 0.25rem |
| 8px | 0.5rem |
| 12px | 0.75rem |
| 16px | 1rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
| 80px | 5rem |
| 96px | 6rem |
| 112px | 7rem |
| 128px | 8rem |
| 160px | 10rem |
| 192px | 12rem |
| 256px | 16rem |
| 320px | 20rem |
| 384px | 24rem |
Breakpoints
| PX | REM | Common use |
|---|---|---|
| 320px | 20rem | Mobile small (iPhone SE) |
| 375px | 23.4375rem | Mobile default (iPhone 14) |
| 480px | 30rem | Mobile landscape |
| 640px | 40rem | Large mobile/small tablet |
| 768px | 48rem | Tablet portrait |
| 1024px | 64rem | Tablet landscape/small desktop |
| 1280px | 80rem | Desktop standard |
| 1440px | 90rem | Desktop large |
| 1536px | 96rem | Desktop XL |
| 1920px | 120rem | Full HD |
Breakpoints in rem respond to users' browser font-size preferences.
How to convert PX to REM
The formula has one step:
rem = px ÷ root font size
Most browsers default to 16px. So divide any pixel value by 16. Example:
- 20px to rem: 20 ÷ 16 = 1.25rem
- 18px to rem: 18 ÷ 16 = 1.125rem
- 14px to rem: 14 ÷ 16 = 0.875rem
- 24px to rem: 24 ÷ 16 = 1.5rem
If you've set a custom root font size, say html { font-size: 18px }, divide by 18 instead. The tool handles this automatically when you change the base value above.
The 62.5% root font size trick
Set your root font size to 62.5%, and 1rem becomes exactly 10px.
html {
font-size: 62.5%; /* 1rem = 10px */
}
body {
font-size: 1.6rem; /* Reset body back to 16px */
}The math gets trivial
20px becomes 2rem. 14px becomes 1.4rem. 36px becomes 3.6rem. No calculator needed mid-session.
One thing to know: users who have set their browser's default font size above 16px will have that preference compressed. 62.5% of 20px is 12.5px, so their 1rem is now 12.5px instead of the 20px they configured. If you use this trick, test your layout with browser font sizes at 20px and 24px, not just the default. The tool above has a "Use 62.5% base" toggle that automatically switches the converter to a 10px root.
PX vs REM vs EM: what's the difference?
Three CSS length units. Pick the wrong one, and you'll spend an afternoon debugging why a nested component came out 1.728× bigger than it should be.
PX
Pixels (px) are absolute. font-size: 16px is 16px everywhere: every screen, every context, regardless of what the user has configured in their browser. For typography, that rigidity is the problem.
REM
Root EM (REM) is relative to the root <html> element's font size. If the browser default is 16px and you haven't changed it, 1rem = 16px. Change the root, and every rem value scales with it. Rem respects what users configure in their browser settings. That's the key difference.
EM
EM is relative to the parent element's font size. Useful for self-contained components where you want everything to scale together. Dangerous in deeply nested layouts, because it compounds. A <span> inside a <li> inside a <ul>, where each element has font-size: 1.2em, ends up at 1.2 × 1.2 × 1.2 = 1.728× the root size. That's the bug.
| PX | REM | EM | |
|---|---|---|---|
| Relative to | Nothing (absolute) | Root <html> font size | Parent element font size |
| Responds to browser preferences | No | Yes | Depends on parent |
| Compounds when nested | No | No | Yes |
| Predictable across components | Yes | Yes | No |
| Best for | Borders, shadows, fixed chrome | Typography, spacing, layout | Component-scoped sizing |
| WCAG 1.4.4 compliance (text resize) | Fails for font sizes | Passes | Passes if root is rem |
When to use PX
PX belongs on things that shouldn't scale with text: borders, box shadows, and fixed-width UI elements like a sidebar that's always 240px wide.
For font sizes, padding, margins, and gaps (anything related to readability and layout), rem is almost always the better choice. Media query breakpoints are worth converting to rem, too.
Why use REM in CSS?
Accessibility: WCAG 2.2 success criterion 1.4.4
WCAG 2.2 SC 1.4.4 (Resize Text, Level AA) requires that text can be resized up to 200% without losing content or functionality. Pixel-based font sizes fail this. They don't respond to browser default font size settings, so a user who needs larger text and configures their browser accordingly gets no benefit from a px-based stylesheet.
Rem-based font sizes pass because they scale with the root. A user who sets their browser default to 24px visits a rem-based page, and every font size scales up proportionally. That's what WCAG SC 1.4.4 requires.
About 1 in 4 adults in the US lives with some form of disability, and text resizing is one of the most common browser-level accessibility tools. Rem supports those users without any extra code.
Design systems that scale
When everything is in rem, a single CSS change cascades throughout the site. Update html { font-size: 18px } and your entire type scale, spacing, and layout shifts proportionally. No find-and-replace across dozens of files.
Design systems and token-based workflows (Tokens Studio, Style Dictionary) output rem values for exactly this reason. Figma designs in px. Production CSS needs rem. Converting at the handoff keeps everything consistent.
Responsive layouts and media queries
Media queries in rem respond to a user's browser preferences. @media (min-width: 48rem) triggers at 768px when the browser default is 16px. If a user has set their browser to 20px, that breakpoint fires at 960px. More space for larger text.
@media (min-width: 768px) always fires at 768px, regardless of browser settings. Rem breakpoints give you accessible, preference-aware behavior at no extra cost.
Tailwind CSS PX to REM mapping
Tailwind uses a 4px (0.25rem) base spacing unit. Every spacing class (padding, margin, width, gap) is a multiple of that. Font sizes follow a separate scale. Tailwind's built-in classes are already in rem. Use this table for custom values or when translating a Figma design that's still in pixels.
Typography scale
| Tailwind class | PX | REM |
|---|---|---|
| text-xs | 12px | 0.75rem |
| text-sm | 14px | 0.875rem |
| text-base | 16px | 1rem |
| text-lg | 18px | 1.125rem |
| text-xl | 20px | 1.25rem |
| text-2xl | 24px | 1.5rem |
| text-3xl | 30px | 1.875rem |
| text-4xl | 36px | 2.25rem |
| text-5xl | 48px | 3rem |
| text-6xl | 60px | 3.75rem |
| text-7xl | 72px | 4.5rem |
| text-8xl | 96px | 6rem |
| text-9xl | 128px | 8rem |
Spacing scale (padding, margin, gap, width, height)
| Tailwind class | PX | REM |
|---|---|---|
| 0 (p-0, m-0, gap-0) | 0px | 0rem |
| 1 (p-1, m-1, gap-1) | 4px | 0.25rem |
| 2 | 8px | 0.5rem |
| 3 | 12px | 0.75rem |
| 4 | 16px | 1rem |
| 5 | 20px | 1.25rem |
| 6 | 24px | 1.5rem |
| 7 | 28px | 1.75rem |
| 8 | 32px | 2rem |
| 9 | 36px | 2.25rem |
| 10 | 40px | 2.5rem |
| 11 | 44px | 2.75rem |
| 12 | 48px | 3rem |
| 14 | 56px | 3.5rem |
| 16 | 64px | 4rem |
| 20 | 80px | 5rem |
| 24 | 96px | 6rem |
| 28 | 112px | 7rem |
| 32 | 128px | 8rem |
| 36 | 144px | 9rem |
| 40 | 160px | 10rem |
| 44 | 176px | 11rem |
| 48 | 192px | 12rem |
| 52 | 208px | 13rem |
| 56 | 224px | 14rem |
| 60 | 240px | 15rem |
| 64 | 256px | 16rem |
| 72 | 288px | 18rem |
| 80 | 320px | 20rem |
| 96 | 384px | 24rem |
Add custom rem-based sizes in tailwind.config.js
module.exports = {
theme: {
extend: {
fontSize: {
'display-sm': '2.25rem', // 36px
'display': '3rem', // 48px
'display-lg': '3.75rem', // 60px
'hero': '4.5rem', // 72px
},
spacing: {
'128': '8rem', // 128px
'144': '9rem', // 144px
}
}
}
}Advanced features of the PX to REM converter
Fluid typography with CSS clamp()
Modern CSS lets you set a font size that scales smoothly between a minimum and maximum without any media queries. clamp() takes 3 arguments: minimum size, preferred (fluid) size, maximum size.
font-size: clamp(1rem, 2.5vw + 0.5rem, 1.5rem);
This scales from 16px (1rem) on narrow screens up to 24px (1.5rem) on wide screens, with a fluid curve in between. No breakpoint jumps.
How to use the converter for clamp()
- Decide your minimum size in px. Convert to rem: 16px ÷ 16 = 1rem.
- Decide your maximum size in px. Convert to rem: 24px ÷ 16 = 1.5rem.
- Build your clamp expression: clamp(1rem, [preferred], 1.5rem).
- Tune the preferred value. 2.5vw + 0.5rem is a solid starting point for headings.
The batch converter handles steps 1 and 2 at once: paste your min and max px values, get both rem equivalents, then slot them into the expression.
CSS custom properties/design tokens output
After batch conversion, export a full :root block with named CSS variables:
:root {
/* Spacing */
--spacing-1: 0.25rem; /* 4px */
--spacing-2: 0.5rem; /* 8px */
--spacing-3: 0.75rem; /* 12px */
--spacing-4: 1rem; /* 16px */
--spacing-6: 1.5rem; /* 24px */
--spacing-8: 2rem; /* 32px */
--spacing-12: 3rem; /* 48px */
--spacing-16: 4rem; /* 64px */
/* Typography */
--font-sm: 0.875rem; /* 14px */
--font-base: 1rem; /* 16px */
--font-lg: 1.125rem; /* 18px */
--font-xl: 1.25rem; /* 20px */
--font-2xl: 1.5rem; /* 24px */
}Paste directly into your CSS, or feed it into Style Dictionary as a JSON token source. Naming follows the Tailwind spacing scale by default; rename variables before copying if you need a different convention.
Common mistakes when using REM in CSS
Using rem for borders
Borders shouldn't scale with text. Keep border: 1px solid. If you write border: 0.0625rem solid, a user zoomed to 200% gets a 2px border. That's probably not what you designed. Same goes for box shadows and outlines, keep those in px too.
Changing the root font size and forgetting the downstream effects
Setting html { font-size: 14px } shifts your entire rem baseline from 16px to 14px. Every converted value in your stylesheet now computes slightly smaller than you designed.
If you worked from a 16px base in Figma and converted to rem, those values are now off. Keep the root at 16px (or use a percentage like font-size: 87.5% for 14px) and reconvert only the values that need to change.
Confusing rem with em
Both have "em" in the name. The difference is what they reference. Em is relative to the parent element. It compounds when nested. Rem always references the root <html> element, regardless of nesting depth. If you're seeing unexpectedly large font sizes in nested components, compounded em values are likely the culprit. Switch to rem for predictability.
Testing only at the browser default
Most developers test at 100% zoom with the browser set to 16px. Rem layouts look great. Now go to Chrome settings, set the default font size to 20px or 24px, and reload. If text overflows, containers collapse, or layouts break, that's a real bug that users with accessibility needs will hit. Test at larger browser font sizes during development, not just before launch.
Pixel breakpoints in media queries
@media (min-width: 768px) ignores browser font size preferences entirely. @media (min-width: 48rem) respects them. For accessible, preference-aware layouts, use rem breakpoints.
Summary
A rem-based font size that looks perfect at 16px can reflow containers and overflow text when a user has set their browser to 20px. Most developers never test this. And most never catch it until someone files a bug.
BotGauge catches visual regressions before users do. It runs automated tests across real browsers and screen sizes, flags what breaks, and tells you exactly where. Ship with confidence instead of crossing your fingers on deploy day.