PX, EM & REM Converter
Convert CSS lengths between pixels, em, and rem in any direction. Set the actual em context and rem root size, compare all three equivalents, swap units without changing the represented length, control decimal precision, and convert up to 100 design-token or spacing values at once.
CSS length converter
PX to EM
px
16px
em
1em
rem
1rem
Common pixel reference
0.25em0.25rem0.5em0.5rem0.625em0.625rem0.75em0.75rem0.875em0.875rem1em1rem1.125em1.125rem1.25em1.25rem1.5em1.5rem2em2rem2.5em2.5rem3em3rem4em4remConvert multiple values
Paste up to 100 values. Optional px suffixes are accepted.
Converted values
8px → 0.5em 12px → 0.75em 16px → 1em 20px → 1.25em 24px → 1.5em 32px → 2em
How to Use the PX to EM and REM Converter
Enter a CSS length and choose whether the source value is in px, em, or rem. Select the target unit and the result updates immediately.
Set EM context to the font-size reference that controls the em value, and set REM root to the computed font size of the document root. The calculator shows the selected conversion and all three equivalent values.
Use Swap to reverse the units while preserving the represented length. Maximum decimals controls only the copy-ready formatting.
Open Convert multiple values to process a spacing scale, type scale, or design-token list in one batch.
PX, EM, and REM Do Not Have One Universal Ratio
A CSS pixel has a defined relationship inside CSS, but em and rem are relative lengths. Their pixel equivalents depend on font-size context.
One em follows a local font-size reference, while one rem follows the root element. They both equal 16px only when both relevant computed font sizes are 16px.
A converter that permanently assumes 1em = 1rem = 16px can produce incorrect code for components or projects with another font-size context.
How different font-size contexts change the result
Swipe horizontally to view the full table.
What Is a CSS Pixel?
The px unit represents the CSS reference pixel. It is an absolute CSS length unit, but it should not be interpreted as one guaranteed physical hardware pixel.
Browsers map CSS pixels to device pixels according to factors such as device pixel ratio, zoom, output medium, and viewing conditions.
This converter works only with CSS length relationships. It does not inspect screen density, browser zoom, device pixels, image pixels, or physical dimensions.
How EM Is Resolved
For most properties, an em unit is based on the computed font size of the element on which the value is used. A padding value of 1.5em therefore scales with that element's own text size.
When em is used in the font-size property itself, using the element's resulting size would be circular. In that case, the value is resolved from the inherited font size of the parent.
Use browser developer tools to inspect the relevant computed font size when reproducing an existing component. The correct base cannot always be inferred from the source code alone because inheritance and the cascade may change it.
How REM Is Resolved
The rem unit is a root font-relative length. It follows the computed font size of the root element, usually html in an HTML document.
A 16px root is common, but it is not universal. Author styles and user preferences can produce another root size.
When rem is used in the root element's own font-size declaration, CSS resolves it against the initial font size rather than recursively against itself.
Why EM and REM Behave Differently in Components
EM is useful when a component should scale internally with its local typography. Increasing the component font size can proportionally change em-based spacing, icons, and controls.
REM is useful when values should remain connected to one document-level scale regardless of component nesting.
Nested em font sizes can compound. For example, a child at 1.25em inside a parent at 1.25em becomes 1.5625 times the parent's original inherited size. REM does not compound through that nesting in the same way.
Converting Design Tokens and Figma Values
Design tools often express dimensions as pixel numbers, while a codebase may store typography or spacing tokens in rem or em.
The batch converter accepts up to 100 values and preserves their order. Paste values such as 4, 8, 12, 16, 24, 32, choose the source and target units, then copy the converted list.
A numeric conversion does not reveal the intended CSS relationship. Confirm whether each token should follow the root scale, a component font size, or a fixed CSS-pixel reference before replacing units mechanically.
How the Conversion Is Calculated
Every source value is first resolved to CSS pixels. An em value is multiplied by the selected EM context, while a rem value is multiplied by the selected REM root.
The pixel result is then divided by the destination context when converting to em or rem.
Direct em-to-rem and rem-to-em conversions require both contexts because the two units can represent different computed lengths.
Common PX, EM, and REM values at a 16px base
EM and REM match in this table only because both example contexts are 16px.
Swipe horizontally to view the full table.
Choosing Between PX, EM, and REM
Choose a unit according to the relationship the value should preserve, not because one unit is universally superior.
Relative units can support flexible typography and user font preferences, but replacing every pixel value with rem does not automatically make a page responsive or accessible.
Test browser zoom, text-only zoom where supported, reflow, long content, control sizing, spacing, and user-agent font preferences in the actual interface.
PX, EM, and REM compared
Swipe horizontally to view the full table.
Precision and Copy-Ready CSS Values
Maximum decimals controls visible rounding from zero through eight decimal places. Trailing zeros are removed, and a rounded negative zero is displayed as zero.
The converter calculates with the entered JavaScript numbers before formatting the output. A rounded display should not be interpreted as greater accuracy than the source values or stylesheet context provide.
For design tokens, choose enough decimal places to preserve the intended scale without filling the stylesheet with unnecessary digits.
Privacy and Local Processing
Values and batch lists are converted in the browser. They are not uploaded to a conversion service or placed in the page URL.
The tool does not read project files, inspect a live stylesheet, connect to Figma, or save a token library.
Clipboard access is requested only when a copy control is used.
PX, EM, and REM Conversion Formulas
The source value is resolved to CSS pixels before conversion to the selected destination unit.
Formula variables
- Computed CSS length in pixels
- Length expressed in em
- Length expressed in rem
- Relevant em font-size context in pixels
- Computed root font size in pixels
Examples
Convert 16px to rem
1Input
Value: 16px; REM root: 16px.
Show result
Result
1rem
16 ÷ 16 = 1.
Convert 24px to rem
2Input
Value: 24px; REM root: 16px.
Show result
Result
1.5rem
24 ÷ 16 = 1.5.
Convert component spacing to em
3Input
Value: 12px; EM context: 20px.
Show result
Result
0.6em
For padding and similar properties, the relevant base is normally the element's computed font size.
Convert font size from em to pixels
4Input
Value: 1.25em; inherited parent font size: 16px.
Show result
Result
20px
Convert em to rem with different contexts
5Input
Value: 2em; EM context: 20px; REM root: 16px.
Show result
Result
2.5rem
2em resolves to 40px, then 40 ÷ 16 = 2.5rem.
Convert rem to em
6Input
Value: 1.5rem; REM root: 18px; EM context: 16px.
Show result
Result
1.6875em
1.5rem resolves to 27px, then 27 ÷ 16 = 1.6875em.
Convert a spacing scale in one batch
7Input
4, 8, 12, 16, 24, 32px to rem at a 16px root.
Show result
Result
0.25rem, 0.5rem, 0.75rem, 1rem, 1.5rem, 2rem.
Frequently Asked Questions
How do I convert px to rem?
Divide the pixel value by the computed root font size. With a 16px root, 24px equals 1.5rem.
How do I convert px to em?
Divide the pixel value by the font-size context that controls the em declaration.
Is 1em always 16px?
No. One em equals the relevant local font-size context. It equals 16px only when that context is 16px.
Is 1rem always 16px?
No. One rem follows the computed font size of the root element. Sixteen pixels is common but not guaranteed.
What is the difference between em and rem?
EM is local and follows an element or inherited font-size context. REM is root-relative and follows the document root's computed font size.
Which font size should I use as the EM context?
For font-size, use the inherited parent font size. For most other properties, use the computed font size of the element receiving the declaration.
Why are separate EM and REM contexts required?
The local and root font sizes can differ. Direct em-to-rem or rem-to-em conversion is incorrect when both are assumed to use the same base.
Can I use this as a Figma px-to-rem converter?
Yes, for plain numeric values. Confirm that the design pixels should actually follow the root font size before replacing the units in code.
Can I convert several values at once?
Yes. The batch converter accepts up to 100 values separated by spaces, commas, semicolons, or new lines.
Can batch values include CSS unit suffixes?
Yes. Suffixes matching the selected source unit are accepted. Mixed source units are rejected.
Why can EM values compound?
An em font-size is calculated from the inherited parent size. Repeating em multipliers through nested elements multiplies those scale changes.
Is a CSS pixel the same as a device pixel?
Not necessarily. CSS defines a reference pixel, and browsers may map one CSS pixel to multiple physical device pixels.
Does using rem automatically make a site accessible?
No. Unit choice is only one factor. Accessibility also depends on zoom, reflow, readable text, control sizing, content expansion, and respect for user preferences.
Can the converter evaluate calc() or CSS variables?
No. Resolve expressions and custom properties in browser developer tools before entering a plain numeric value.
Why are negative values accepted?
Many CSS properties permit negative lengths, including some margins, offsets, and transforms. Font-size contexts must remain positive.
Are my CSS values uploaded or stored?
No. Conversion runs locally in the browser, and the tool does not upload values or add them to the page URL.
References
You might also like
My Screen Size
Instantly check your browser-reported screen resolution, live viewport, aspect ratio, device pixel ratio, estimated device pixels, color depth, and touch support.
Online Ruler
Measure small objects on screen in millimetres, centimetres, and inches, with horizontal, vertical, fullscreen, and card-calibrated actual-size modes.
Feet to Inches Converter
Convert feet to inches or swap the direction to convert inches to feet, with clean results rounded to three decimal places.
Screenshot Redaction Tool
Black out private areas of a screenshot with opaque replacement pixels and inspect the encoded PNG before downloading.