📐 PX to REM Converter
By ToolNimba Web Dev Team · Updated 2026-06-19
The root font size used for the conversion. Browsers default to 16px.
Type a value in any box and the others convert instantly using your base font size.
This PX to REM converter turns pixel values into rem (and back), so you can build font sizes, spacing and layouts that scale with the user’s browser settings. Enter a base font size (16px by default, the browser standard), then type a px or rem value into either box. The fields update live in both directions, and you also get the matching em value. Switching from fixed pixels to rem is one of the simplest things you can do to make a site more accessible.
What is the PX to REM Converter?
A pixel (px) is an absolute CSS unit: 16px is 16px no matter what. A rem ("root em") is a relative unit equal to the font size of the root html element. By default browsers set that root size to 16px, so 1rem = 16px, 2rem = 32px, and 0.5rem = 8px. The conversion is simply rem = px / base and px = rem x base. Because every rem is measured against one shared root value, scaling the whole interface up or down is as easy as changing a single number.
The accessibility advantage is the main reason developers prefer rem over px for type and spacing. When a user increases their default font size in the browser (a common need for low vision), elements sized in rem grow proportionally, while elements hard-coded in px stay locked at their fixed size and can break layouts or stay uncomfortably small. Sizing in rem respects the user’s choice. It also keeps your design consistent: change the root font size once and everything tied to rem rescales together, which is handy for responsive type scales.
em is the close cousin of rem. An em is relative to the font size of its own element (or the nearest parent that sets one), not the root. That makes em useful for component-local spacing that should track the component’s own text size, but it can compound when elements nest, since each level multiplies. rem avoids that compounding by always pointing at the root. This tool shows em alongside rem computed against the same base, which is the common reference point people want, but remember that a real em in your layout depends on the actual element it sits in.
When to use it
- Converting a design handed off in pixels (from Figma, Sketch or a PSD) into rem values for an accessible, scalable stylesheet.
- Building a modular type scale where every font size is expressed in rem relative to a single root value.
- Translating an existing px-based stylesheet to rem so that browser font-size and zoom settings are respected.
- Quickly checking what a rem value resolves to in pixels while debugging spacing or media queries.
How to use the PX to REM Converter
- Set the base font size in pixels (leave it at 16 unless your html element uses a different root size).
- Type a pixel value into the Pixels box to see its rem and em equivalents.
- Or type a rem (or em) value to convert it back to pixels.
- Change the base font size at any time and the conversion recalculates instantly.
Formula & method
Worked examples
Convert 24px to rem with the default 16px base font size.
- rem = px ÷ base
- rem = 24 ÷ 16
- rem = 1.5
Result: 24px = 1.5rem (and 1.5em against the same 16px base)
Convert 1.25rem back to pixels with a 16px base.
- px = rem x base
- px = 1.25 x 16
- px = 20
Result: 1.25rem = 20px
Convert 18px to rem when the root font size is set to 10px (a common "62.5%" trick).
- rem = px ÷ base
- rem = 18 ÷ 10
- rem = 1.8
Result: 18px = 1.8rem at a 10px base, which makes mental math easier
Common px to rem conversions at the default 16px base
| Pixels | REM | EM (16px base) |
|---|---|---|
| 8px | 0.5rem | 0.5em |
| 12px | 0.75rem | 0.75em |
| 14px | 0.875rem | 0.875em |
| 16px | 1rem | 1em |
| 20px | 1.25rem | 1.25em |
| 24px | 1.5rem | 1.5em |
| 32px | 2rem | 2em |
| 48px | 3rem | 3em |
How the same px value maps to rem at different base font sizes
| Pixels | Base 10px | Base 16px | Base 20px |
|---|---|---|---|
| 16px | 1.6rem | 1rem | 0.8rem |
| 20px | 2rem | 1.25rem | 1rem |
| 24px | 2.4rem | 1.5rem | 1.2rem |
| 40px | 4rem | 2.5rem | 2rem |
Common mistakes to avoid
- Assuming the base is always 16px. If your stylesheet sets html { font-size: 62.5% } (10px) or any custom value, then 1rem is no longer 16px. Always convert against the actual root font size your CSS applies, which is why this tool lets you change the base.
- Confusing rem with em. rem is relative to the root element, while em is relative to the current element’s own font size. In nested elements, em multiplies at each level and can drift, whereas rem stays anchored to one root value.
- Setting the root font size in px and removing scalability. Writing html { font-size: 16px } overrides the user’s browser font preference and defeats much of the point of rem. Prefer the default, or use a percentage so user settings still take effect.
- Carrying too many decimal places into CSS. Values like 0.93333rem add noise. Pick a clean base (or a value that divides evenly) so your rem numbers stay tidy and predictable across the codebase.
Glossary
- px (pixel)
- An absolute CSS length unit. One px is a fixed size that does not scale with font settings.
- rem (root em)
- A relative unit equal to the font size of the root html element. 1rem equals the root font size, usually 16px.
- em
- A relative unit equal to the font size of the current element. It compounds in nested elements, unlike rem.
- Base font size
- The root font size (the html element’s font-size) that rem values are measured against. The browser default is 16px.
- Root element
- The html element at the top of the document. Its font-size sets the value of 1rem for the whole page.
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the base (root) font size: rem = px ÷ base. With the standard 16px base, 24px ÷ 16 = 1.5rem. This tool does it for you and also converts rem back to px.
What is 16px in rem?
At the default 16px base font size, 16px equals exactly 1rem. If your root font size is different, divide 16 by that base instead, for example 16 ÷ 10 = 1.6rem at a 10px base.
Why use rem instead of px?
rem scales with the user’s browser font-size and zoom settings, so text and spacing grow when someone needs larger type. px is fixed and ignores those preferences, which is worse for accessibility and for maintaining a consistent type scale.
What is the difference between rem and em?
rem is always relative to the root element’s font size, while em is relative to the font size of the current element. Because em is local, it compounds when elements nest, whereas rem stays anchored to one shared root value.
What base font size should I use?
Most sites keep the browser default of 16px, which keeps text readable and respects user settings. Some developers set the root to 10px (via font-size: 62.5%) so that rem maths is easier, since 1px then equals 0.1rem.
Does this converter work for rem to px too?
Yes. The fields are two-way and live: type into the rem box and it converts to px, or type into the px box for rem. Change the base font size and everything recalculates instantly.