PX to REM Converter
The PX to REM Converter turns pixel values into rem units (and back) using a root font size you control, so enter a value in either the Pixels or REM field and watch the other one update as you type. Set the Root Font Size field if your project doesn't use the browser default of 16px, or paste a whole list of pixel values into the Bulk Convert box to get every rem equivalent at once, ready to copy into your CSS. The free free monitor viewing distance calculator runs the calculation entirely in your browser — no data ever leaves your device.
Bulk Convert
When you're building accessible websites or migrating a px-based layout to scalable rem values for better scalability, knowing the exact output of every pixel value is critical — one wrong unit can break your entire layout across devices. This px to rem converter gives you instant results so you can translate pixel values to their relative unit equivalents and back again without mental arithmetic, whether you're sizing text, setting margins, or aligning with a component scale. Because rem scales with the root font-size, a single base change re-bases every value at once — making this free online dev tool essential for any responsive design workflow in Webflow, Figma, or a custom style file.
About This Accessible px to rem Converter Tool
The px ↔ rem converter above accepts any pixel value in the px entry box and returns its output instantly — no page reload, no configuration required. A second entry box lets you set your root font-size (defaults to 16px, i.e. 1 rem 16px), so the tool adapts to any base font you've declared in your style rules. Bidirectional unit conversion means you can also start from a rem value and recover the original pixel value — useful when you need to reverse-engineer a rem output in someone else's code.
The underlying px to rem formula is straightforward:
$$\text{rem} = \frac{\text{px}}{\text{root font-size}}$$At the standard default of 16px, this simplifies to:
So 24px ÷ 16 = 1.5rem, and 10px ÷ 16 = 0.625rem — for example, 1px converts to 0.0625 rem. Change the base entry box to any other value and all output values refresh to reflect your project's actual root size. The tool is processed locally in your browser — nothing is sent to a server.
How to Use the PX to REM Calculator Step by Step
This tool is designed to slot into your frontend workflow without friction. Here's how to get production-ready code values out of it in three steps:
- Step 1: Enter the pixel value you want to translate in the PX entry box — for example, type
24to process 24 pixels. The result field updates as you type. - Step 2: Set your root font-size in the base entry box. It defaults to
16pxbecause that is the browser default font size used by Chrome, Firefox, Safari, and most modern clients. If your project declareshtml { font-size: 18px; }in your style rules, enter18here instead. - Step 3: Copy the output from the result field and paste it directly into your style property. Use the copy to clipboard button for speed. To go in the opposite direction — rem to pixels — simply type your value in the REM field instead.
Most projects use a fixed root size of 16px, which means 16px = 1rem and 8px = 0.5rem. However, frameworks like Relume and Client-First Webflow setups sometimes set a custom root to 10px via html { font-size: 62.5%; }. When you update the base entry box here, all outputs refresh automatically — no need to recalculate manually for every size in your design tokens.
Worked Example: Convert a Common Font-Size
Suppose your designer hands you a Figma spec calling for a 24px paragraph text size. With the default root setting, you divide the pixel value by the base:
- Identify the pixel value:
24px - Apply the rem formula: $$\text{rem} = \frac{24}{16}$$
- Result: $$\text{rem} = 1.5\text{rem}$$
p {
font-size: 1.5rem; /* 24px at 16px root */
}Worked Example: Converting Padding Values
Need to translate a 40px padding value for consistent margins across your layout? The process is identical:
- Pixel value:
40px - Divide by root: $$\text{rem} = \frac{40}{16} = 2.5\text{rem}$$
.card {
padding: 2.5rem; /* 40px at 16px root */
}Worked Example: Custom Root Font-Size Scenario
If you set html { font-size: 62.5%; } in your style rules (the 10px base trick), the same 24px target maps to a completely different output — illustrating exactly why the root font-size entry matters:
- Root font-size:
10px(via 62.5% of the standard client default) - Apply formula: $$\text{rem} = \frac{24}{10} = 2.4\text{rem}$$
html {
font-size: 62.5%; /* 10px base */
}
p {
font-size: 2.4rem; /* 24px at 10px root */
}This is why the tool's base entry box matters: entering the wrong base gives you incorrect outputs across your entire design tokens scale.
Understanding the Root Element — Convert PX to REM Accurately Every Time
The rem unit stands for root em. It is a relative unit — a CSS length measurement — that is always measured relative to the font-size declared on the root element of your HTML document — the <html> tag. Unlike the em unit (which is relative to the parent element's font-size and can compound through nested elements), rem stays consistent across the page because it always references the single root size. Understanding em vs rem is key: this predictability makes rem the preferred choice for scalable type systems, padding, and fluid responsive design.
Setting Base Font Size in Your Style Rules
You can declare your base font size on the document root using either the html tag selector or the :root selector. Both target the same element, but :root carries higher specification in the cascade:
/* Using the html tag selector */
html {
font-size: 16px;
}
/* Using the :root selector (higher specificity) */
:root {
font-size: 16px;
}With either declaration, 1rem equals 16px and all values in your components, layout, and text scale proportionally. Switching this single value re-bases every output across your entire style rules at once — a powerful lever when you migrate a component library.
Three Ways to Target the Root Element with CSS
There are three standard methods in web development for applying a font-size to the document root, each suited to a different project structure:
- Inline Style — Add the
styleattribute directly on the<html>tag. Highest specificity but least maintainable; avoid in production.<html style="font-size: 16px;"> - Internal Style Block — Place a
styletag inside theheadtag of your document. Useful for single-page prototypes or rapid UI design experiments.<head> <style> :root { font-size: 16px; } </style> </head> - External Style File — The approach used by virtually all professional frontend and web design workflows. Create a CSS file (e.g.,
styles.css) and link it via alinktag inside yourheadtag. This is how utility frameworks and most UI systems deliver base styles.<!-- In your markup --> <head> <link rel="stylesheet" href="assets/styles.css"> </head> /* In styles.css */ :root { font-size: 16px; }
Beyond these three methods, you can also target the document root using a CSS ID selector (prefix the id name with a hashtag #), a CSS class selector (prefix the class name with a dot prefix .), or a tag selector — simply writing html as the selector. Among all approaches, the :root pseudo-class is the modern standard because its higher specification ensures it wins the cascade in virtually every scenario. An id selector using a hashtag prefix on the root tag is another valid option, though less semantically obvious.
PX to REM Conversion Tables — Convert Pixels to REM at a Glance
The following conversion tables let you sanity-check common pixel steps and their outputs without opening a calculator. Both tables assume a 16px root font-size (the standard default). If your project uses a different base font, use the px to rem converter tool to generate values specific to your setup. All calculations follow the formula: rem = px ÷ 16. Note that 16px = 1rem is the key anchor; every other value scales linearly from there.
| PX | REM |
|---|---|
| 1px | 0.0625rem |
| 2px | 0.125rem |
| 4px | 0.25rem |
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
| 72px | 4.5rem |
| 80px | 5rem |
| 96px | 6rem |
| 100px | 6.25rem |
| 128px | 8rem |
| 160px | 10rem |
| 192px | 12rem |
| 256px | 16rem |
| 320px | 20rem |
| 480px | 30rem |
| 768px | 48rem |
| 1024px | 64rem |
| 1200px | 75rem |
| 1440px | 90rem |
| 1600px | 100rem |
The table below gives you the reverse — rem to pixels — so you can translate values in either direction. Use this reference table to quickly look up any output when inspecting a component library or reading someone else's code.
| REM | PX |
|---|---|
| 0.0625rem | 1px |
| 0.125rem | 2px |
| 0.25rem | 4px |
| 0.5rem | 8px |
| 0.625rem | 10px |
| 0.75rem | 12px |
| 1rem | 16px |
| 1.25rem | 20px |
| 1.5rem | 24px |
| 2rem | 32px |
| 2.5rem | 40px |
| 3rem | 48px |
| 4rem | 64px |
| 5rem | 80px |
| 6rem | 96px |
| 8rem | 128px |
| 10rem | 160px |
| 15rem | 240px |
| 20rem | 320px |
| 30rem | 480px |
| 40rem | 640px |
| 50rem | 800px |
| 60rem | 960px |
| 80rem | 1280px |
| 100rem | 1600px |
All values above assume a 16px root. If your root differs — for example, a 10px base via html { font-size: 62.5%; } — use the tool to regenerate the correct output for every size in your project. Key anchors to memorize: 4px = 0.25rem, 8px = 0.5rem, 16px = 1rem, 24px = 1.5rem, 32px = 2rem, 40px = 2.5rem, 48px = 3rem, 64px = 4rem.
Why REM Units Improve Accessibility — Convert Pixels to REM for Inclusive Design
Accessibility is not optional in modern web development. Using rem rather than px for text size, padding, and margin is one of the most direct ways to honour user preferences, support assistive technology, and meet WCAG 2.2 AA standards. The WCAG 2.2 Success Criterion 1.4.4 (Resize Text) requires that text can be resized up to 200% without loss of content or functionality — a requirement that fixed-pixel layouts routinely fail.
Why px fails accessibility: px is an absolute device pixel — a fixed-size unit. When a user increases their default text size to 20px in their client settings because they have low vision or cognitive disabilities, elements declared in px ignore that preference entirely. The layout stays at its designed pixel values, causing reading fatigue and forcing users with low vision to rely on page zoom rather than the more precise text-resizing controls built into screen readers and other assistive technology. A fixed-pixel layout is effectively independent of the user's font preference system — it ignores it entirely.
Rem values solve this by design. Because every rem measurement is relative to the document root — specifically the font-size on the <html> element — when the client adjusts the default text size based on user settings, all rem-declared sizes scale proportionally. Text, padding, and layout flex together in response to user preferences, producing consistent readability across contexts. Users who rely on screen readers, keyboard-accessible navigation, or labeled form controls for non-visual feedback benefit immediately from this scaling behaviour.
Using scalable relative units also supports inclusive design for users with cognitive disabilities — larger text reduces reading fatigue, while proportional padding decisions prevent elements from overlapping when text resizes. If you're building in a visual editor or outputting from a design tool to code, switching from fixed pixels to rem in your type systems and layout breakpoints is one of the fastest wins for accessibility compliance and visual precision simultaneously.
EM vs. REM — Key Differences Every CSS Developer Should Know
Both em and rem are relative units in CSS, and both are relative measurement values — but they reference different ancestor elements, which changes their behaviour dramatically in nested markup. Understanding em vs rem helps you choose the right tool for every situation:
- rem (root em)
- Always relative to the document root — specifically the font-size declared on the
<html>element. A rem value is the same everywhere on the page regardless of nesting depth. This makes it consistent and ideal for text sizing and layout at scale. With 1 rem 16px as the default, the math is straightforward. Rem is a newer relative unit — legacy clients don't support it, though support across modern environments is now effectively universal. - em (element em)
- The em unit is relative to the parent element's font-size (with one exception: when
font-sizeitself uses em, it references the parent rather than the element's own computed size). In deeply nested components, em values compound and can drift unpredictably, making the math harder to apply consistently. Useemwhen you intentionally want size relative to parent, andremwhen you want predictable, consistent sizing relative to the document root.
The difference between rem and em can be summarised in a single rule: rem is relative to root; em is relative to parent. For most text and layout sizing in modern frontend work — particularly in a utility-framework or design tokens workflow — rem is the correct choice because it produces scalable values that behave identically whether an element is at the top level or nested six elements deep. This is why migrating a fixed-pixel layout to scalable relative values is considered best practice for accessible design and layout flexibility across devices, from mobile to desktop.
Frequently Asked Questions About PX to REM Conversion
How do I convert px to rem?
Divide the pixel value by your root font-size. At the default root of 16 pixels, the formula is: rem = px ÷ 16. For example, 24px ÷ 16 = 1.5rem and 10px ÷ 16 = 0.625rem. If your root is set to a different value, replace 16 with your actual base. The tool handles this automatically — just update the base entry box.
Is 1rem always 16px?
No. 1rem equals 16px only when the root font-size matches the browser default of 16px. The rem measurement is always relative to the font-size declared on the <html> element, so if your style rules set html { font-size: 10px; }, then 1rem = 10px throughout your project. Changing the base entry box in this tool updates all outputs to reflect your actual root size.
What is the difference between rem and em?
The core difference is their reference point. rem is always relative to the root <html> element's font-size — it is consistent across the page regardless of where in the document the element lives. em is relative to its parent element's font-size, so nested values compound and drift when elements are deeply nested. For predictable, scalable sizing across a component library, prefer rem.
What is the root element in HTML?
The root element is the <html> element — the outermost tag that contains all other elements including <head> and <body>. Its font-size is the reference point for every rem value in your CSS. You can target it with the html tag selector, an ID selector using a hashtag prefix, a class selector using a dot prefix, or the :root pseudo-class, which carries higher specification in the cascade.
How do I set the root font-size in CSS?
Use either the :root selector or the html tag selector in your style rules:
:root {
font-size: 16px; /* 1rem = 16px */
}
/* or equivalently */
html {
font-size: 16px;
}You can also use a percentage — html { font-size: 62.5%; } sets a 10px base (62.5% of the standard default), making the math trivially easy: divide by 10. Remember to set body { font-size: 1.6rem; } afterwards to restore readable default body text.
Does this converter work for both px to rem and rem to px?
Yes. This accessible px to rem converter supports bidirectional unit conversion — enter a px value to get the rem output, or enter a rem value to recover the original pixel figure. Values update automatically as you type in either field, delivering instant results. This makes it equally useful for writing new styles and for reverse-engineering existing rem outputs. All calculations are processed locally, so no data leaves your device.
What browser compatibility does the rem unit have?
The rem unit is supported in all modern clients and has been for many years. While older browsers like Internet Explorer 8 and below do not recognise it, support across current versions of Chrome, Firefox, Safari, Edge, and all major mobile environments is complete. For the rare case where you need to support legacy clients, a px fallback declared before the rem output is the standard approach in frontend CSS.
Frequently Asked Questions
- How do I convert px to rem?
- Divide the pixel value by the base font size of your root element. The formula is: rem = px ÷ base font size. For example, with a 16px base, 24px equals 24 ÷ 16 = 1.5rem.
- Is 1rem always 16px?
- By default, most browsers set the root font size to 16px, making 1rem equal to 16px. However, this can be overridden by setting a different font-size on the <html> element in your CSS. Always check your project's root font size before converting.
- What is the difference between rem and em?
- rem (root em) is always relative to the font size of the root <html> element, making it consistent throughout the page. em is relative to the font size of the nearest parent element, which can compound and become unpredictable in nested components. rem is generally preferred for scalable, predictable layouts.
- What is the root element and why does it matter?
- The root element in HTML is the <html> tag. The font-size set on this element determines the value of 1rem across your entire stylesheet. Setting a base font size there — for example, font-size: 16px — means every rem unit on the page is calculated relative to that value.
- How do I set the base font size in my CSS?
- You can set it directly on the html selector: html { font-size: 16px; } or use a percentage like html { font-size: 62.5%; } to make 1rem equal to 10px, which simplifies mental math when converting from pixel designs.
- Why should I use rem instead of px for web design?
- rem units scale with the user's browser font size preferences, which improves accessibility. If a user increases their default browser font size for readability, rem-based layouts and text will scale accordingly, while px values remain fixed and may become too small to read comfortably.
- How do I target the root element to change the base font size?
- You can use either the html selector or the :root pseudo-class in CSS — they both target the same element. Example: :root { font-size: 18px; } This changes the rem base for your entire document at once.
- How accurate is this PX to REM converter?
- This converter uses the exact formula rem = px ÷ base and px = rem × base, giving you precise results to 4 decimal places. As long as you enter the correct base font size that matches your CSS, the results are exact and reliable.