PX to REM Converter
Free PX to REM converter with configurable base font size, quick reference table, and bulk conversion for multiple values at once.
Convert pixel values to REM and REM to pixels with a configurable base font size. The tool includes a quick reference table for common sizes and a bulk converter for migrating entire stylesheets. The formula is simple: REM = PX / base font size. With the default 16px base, 24px = 1.5rem.
About PX to REM Converter
How REM Units Work
REM stands for "root em" and is relative to the font size of the root element (<html>). All major browsers set the default root font size to 16px. When a user changes their browser's default font size (for accessibility or preference), all REM-based values scale proportionally.
| PX | REM (base 16px) | REM (base 10px) | Common Use |
|---|---|---|---|
| 8px | 0.5rem | 0.8rem | Small gaps, icon spacing |
| 12px | 0.75rem | 1.2rem | Small/caption text |
| 14px | 0.875rem | 1.4rem | Secondary text, labels |
| 16px | 1rem | 1.6rem | Body text (default) |
| 18px | 1.125rem | 1.8rem | Large body text |
| 20px | 1.25rem | 2rem | H4 headings |
| 24px | 1.5rem | 2.4rem | H3 headings |
| 32px | 2rem | 3.2rem | H2 headings |
| 48px | 3rem | 4.8rem | H1 headings |
| 64px | 4rem | 6.4rem | Hero headings |
PX vs REM vs EM - When to Use Each
| Unit | Relative To | Scales With Browser Font Size? | Best For |
|---|---|---|---|
| px | Nothing (absolute) | No | Borders, box shadows, very small details |
| rem | Root element font size | Yes | Font sizes, padding, margins, media queries |
| em | Parent element font size | Yes (compounds with nesting) | Component-internal spacing, text-related sizing |
| % | Parent element dimension | Depends on context | Widths, responsive layouts |
| vw / vh | Viewport width / height | No | Full-screen sections, responsive typography |
| ch | Width of "0" character | Yes | Constraining text line length (max-width: 65ch) |
The key difference between rem and em: rem always refers to the root, so it is predictable. Em compounds - if a parent has 1.5em and a child has 1.5em, the child's actual size is 1.5 x 1.5 = 2.25 times the root. This compounding makes em harder to reason about in deeply nested components.
The 62.5% Trick
Some projects set the root font size to 62.5% (which equals 10px on browsers with 16px default). This makes the math easier: 1rem = 10px, 1.6rem = 16px, 2.4rem = 24px. You then set body font-size to 1.6rem to restore the default reading size.
| Approach | Root Font Size | 1rem Equals | Pros | Cons |
|---|---|---|---|---|
| Default (no change) | 100% (16px) | 16px | No setup, standard convention | Awkward math (0.875rem for 14px) |
| 62.5% trick | 62.5% (10px) | 10px | Easy math (1.4rem = 14px) | Affects all libraries using rem, needs body reset |
If you use the 62.5% trick, change the base font size in this tool to 10 to get correct conversions.
Why REM Matters for Accessibility
Users can change the default font size in their browser settings, typically because they need larger text to read comfortably. When you use px for font sizes, this setting is overridden - the text stays at the exact pixel size you specified. When you use rem, the text scales with the user's preference.
| Browser Setting | Root Size | font-size: 16px | font-size: 1rem |
|---|---|---|---|
| Default (100%) | 16px | 16px | 16px |
| Large (125%) | 20px | 16px (ignores preference) | 20px (respects preference) |
| Very Large (150%) | 24px | 16px (ignores preference) | 24px (respects preference) |
WCAG 2.1 Success Criterion 1.4.4 requires that text can be resized up to 200% without loss of content or functionality. Using rem units is the easiest way to meet this requirement.
REM in CSS Frameworks
| Framework | Default Unit | Spacing Scale |
|---|---|---|
| Tailwind CSS | rem (with px values in docs) | p-1 = 0.25rem (4px), p-4 = 1rem (16px) |
| Bootstrap 5 | rem | $spacer: 1rem, scale from 0.25rem to 3rem |
| Material UI | rem | spacing(1) = 0.5rem (8px) |
| Chakra UI | rem | Space scale from 1 (0.25rem) to 96 (24rem) |
Bulk Conversion
The bulk converter accepts multiple pixel values separated by commas, spaces, or newlines and converts them all at once. This is useful when migrating a stylesheet from px to rem - paste all the values from your CSS, convert, and replace them in your code. The output preserves four decimal places where needed (with trailing zeros trimmed) so 13px becomes 0.8125rem rather than an unhelpful rounded 0.81rem.
Worked example: A stylesheet has padding: 12px 16px 24px; and a root font size of 16px. Dividing each value gives padding: 0.75rem 1rem 1.5rem;. If the design system later switches to a 10px root (the 62.5% trick), the same pixel intent maps to padding: 1.2rem 1.6rem 2.4rem;. The padding looks identical on screen, but now the sizes are tied to the user's font preference.
Common Conversion Mistakes
Most px-to-rem bugs come from one of four mistakes, and they all produce a layout that looks correct at 100% zoom but breaks for users who have adjusted their browser defaults.
- Hard-coding 16 in a project that uses 62.5%. If your
:rootdeclaresfont-size: 62.5%, then 1rem equals 10px, not 16px. Feeding 24px into a converter set to 16 returns 1.5rem - but applying 1.5rem in this project actually renders as 15px. Always set the base to match the project's root. - Converting border widths. Borders under 2px can disappear when users zoom out, and REM-based 1px borders render as subpixels that browsers round inconsistently. Keep
border: 1px solidin pixels. - Mixing rem and em in nested components. em compounds with the parent font size, so a 1.5em child of a 1.5em parent is 2.25x the root. Use rem for layout spacing and reserve em for values that should scale with the local text (like a button's internal padding).
- Forgetting media queries. Chrome, Firefox, and Safari all evaluate media-query length units against the user-preferred default font size, not the overridden root.
@media (min-width: 48rem)respects browser zoom;@media (min-width: 768px)does not. Bootstrap, Bulma, and Foundation all moved their breakpoints to rem years ago for this reason.
How Browsers Calculate REM
A rem value is calculated once, at the point where it is used, against the computed font size of the root element at that moment. Chrome, Safari, and Firefox all follow the CSS Values and Units Module Level 4 specification on this, so the behaviour is consistent across modern browsers. The key word is computed - if you set html { font-size: 125% }, the root computes to 20px (on a default 16px user setting), and 1rem becomes 20px across the document.
This is why changing the root font size for "easier math" cascades everywhere. Any third-party component that uses rem - date pickers, charting libraries, notification toasts - will scale with your root. The 62.5% trick is popular for this reason, but it is also why many large codebases avoid touching the root and use CSS custom properties or Sass variables instead: :root { --space-1: 0.25rem; --space-2: 0.5rem; } achieves predictable sizing without global side effects.
Performance and File Size
Switching a stylesheet from px to rem has effectively zero runtime cost. Both units are resolved during style calculation, and the browser caches the computed value until the root font size changes. The only measurable difference is file size: "0.875rem" is one character longer than "14px", and "0.0625rem" is three characters longer than "1px". On a minified stylesheet of 20KB, a full migration typically adds 50-200 bytes, which is invisible after gzip. CSS Minifier helps strip any extra whitespace that the migration introduces.
When to Stick With PX
REM is the right default for typography and spacing, but a handful of properties read better in px. The table below summarises the common cases.
| Property | Recommended Unit | Reason |
|---|---|---|
| font-size | rem | Scales with user preference; required for WCAG resize support |
| padding / margin | rem | Keeps proportions with scaled text |
| border-width | px | Sub-pixel borders render inconsistently; hairline borders should stay fixed |
| box-shadow offsets | px | Shadows are visual decoration, not content - scaling them looks odd |
| media-query breakpoints | rem or em | Em is evaluated against the user-preferred size; px ignores zoom preference |
| max-width for text | ch or rem | ch gives a precise character-count target; rem scales with text |
| SVG stroke-width | px (or unitless) | SVG scales internally via viewBox; stroke units should match |
REM and Tailwind's Spacing Scale
Tailwind's default spacing scale multiplies the rem base by 0.25 for each step, so p-1 is 0.25rem (4px), p-4 is 1rem (16px), and p-8 is 2rem (32px). Because the values are in rem, every utility class scales with the root. If you override Tailwind's base by changing the html font size, every utility shifts - a common source of confusion when a design system uses the 62.5% trick with Tailwind, because p-4 then becomes 10px instead of the intended 16px. The Tailwind documentation explicitly recommends leaving the root font size alone and adjusting theme values instead.
Accessibility Compliance in Numbers
WebAIM's 2024 Million report, which scanned the top one million homepages, found that 83% still use at least one absolute font size (typically px) in their CSS. Pages using px-only typography score notably worse on WCAG 1.4.4 (Resize Text) audits because the text does not honour browser-level font preferences. The Web Content Accessibility Guidelines 2.2 require resizable text up to 200% without assistive technology; rem is the simplest CSS unit that satisfies this criterion without JavaScript or media queries.
Bulk Conversion
The bulk converter accepts multiple pixel values separated by commas, spaces, or newlines and converts them all at once. This is useful when migrating a stylesheet from px to rem - paste all the values from your CSS, convert, and replace them in your code. If your input includes a trailing "px" on any value (e.g. "12px, 16px"), the parser strips it automatically so you can copy straight from CSS source.
For checking your viewport dimensions and breakpoints, the Screen Resolution Checker updates in real time. For cleaning up converted stylesheets, the CSS Minifier removes extra whitespace. All calculations run in your browser.
Sources
Frequently Asked Questions
What is the difference between PX and REM units?
PX (pixels) are absolute units that stay the same size regardless of any settings. REM units are relative to the root element's font size (the html element). By default, browsers set the root font size to 16px, so 1rem equals 16px. Using REM allows layouts to scale properly when users change their browser font size, improving accessibility.
Why is the default base font size 16px?
All major browsers set the default font size of the html element to 16px. This is the standard baseline that most CSS frameworks and design systems assume. If your project uses a different root font size (for example, 10px for easier math or 62.5% which equals 10px), you can change the base value in this tool to match.
How do I use the bulk conversion mode?
Enter multiple pixel values separated by commas, spaces, or newlines in the bulk input field. The tool converts all values at once and displays each PX value alongside its REM equivalent. This is useful when migrating an existing stylesheet from PX to REM units.
Does changing the base font size affect all conversions?
Yes. Every conversion in the tool - the single converter, the reference table, and the bulk converter - all use the base font size you set. If you change it from 16px to 10px, then 1rem will equal 10px across the entire tool.
Should I always use REM instead of PX?
Not always. REM is recommended for font sizes, padding, margins, and other spacing values because it respects user font size preferences. PX is still appropriate for values that should not scale, such as border widths, box shadows, or very small decorative details. Many developers use a combination of both units depending on the context.
Related Tools
Link to this tool
Copy this HTML to link to this tool from your website or blog.
<a href="https://toolboxkit.io/tools/px-to-rem-converter/" title="PX to REM Converter - Free Online Tool">Try PX to REM Converter on ToolboxKit.io</a>